@extends('dashboard::layouts.app')

@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        User's Course
    </h5>
@endsection

@section('content')
    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">
                    Course List
                </h3>
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <table class="table table-bordered course-table">
                <thead>
                    <tr>
                        <th>SN</th>
                        <th>User Email</th>
                        <th>Course Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @if (count($courses) > 0)
                        @for ($i = 0; $i < count($courses); $i++)
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                <td>{{ $courses[$i]->user->email }}</td>
                                <td class="title">
                                    {{ $courses[$i]['course_package']['course_package_title'] }}
                                </td>
                                <td>
                                    <a href="javascript:;" class="btn btn-sm btn-clean btn-icon mr-2 edit-button" title="Edit details" data-toggle="modal" data-target="#exampleModalSizeXl" data-id="{{ $courses[$i]->id }}">
                                        <span class="svg-icon svg-icon-md">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24" />
                                                    <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" \ transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) " />
                                                    <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1" />
                                                </g>
                                            </svg>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="btn btn-sm btn-clean btn-icon delete-button" title="Delete" data-toggle="modal" data-target="#exampleModalCenter" data-id="{{ $courses[$i]->id }}">
                                        <span class="svg-icon svg-icon-md">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24" />
                                                    <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
                                                    <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
                                                </g>
                                            </svg>
                                        </span>
                                    </a>
                                </td>
                            </tr>
                        @endfor
                    @endif
                </tbody>
            </table>
            <!--end: Datatable-->
        </div>
    </div>
    <div class='dataTables_paginate float-right paging_simple_numbers'>
        {{ $courses->links() }}
    </div>
    <!--end::Card-->



    <!--begin::Modal-->
    <div class="modal fade" id="exampleModalSizeXl" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalSizeXl" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit User Course</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" action="{{ route('cd-admin.update_user_course') }}" method="post">
                        @csrf
                        <div class="card-body">
                            <input type="hidden" name="id" id="id">
                            <div class="mb-15">
                                <div class="row form-group">

                                    <label class="col-lg-2 col-form-label text-right">Select Course:</label>
                                    <div class="col-lg-6">
                                        <select class="form-control selectpicker" name="course_id" id="course_id" data-size="7" data-live-search="true" required>
                                            @if (count($coursees) > 0)
                                                @foreach ($coursees as $coursee)
                                                    <option value="{{ $coursee->id }}">{{ $coursee->course_package_title }}</option>
                                                @endforeach
                                            @else
                                                <option>No courses to Select</option>
                                            @endif
                                        </select>
                                        @error('course_id')
                                            <span style="color: red;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-3"></div>
                                <div class="col-lg-6">
                                    <input type="submit" class="btn btn-success mr-2" value="Edit User Course">
                                    <button type="reset" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->




    <div class="modal fade" id="exampleModalCenter" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog .modal-dialog-centered" role="document">
            <form class="form" action="{{ route('cd-admin.delete_user_course') }}" method="get">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Delete User Course</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i aria-hidden="true" class="ki ki-close"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to remove this course?
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="id" id="user_course_id">
                        <input type="submit" class="btn btn-primary font-weight-bold" value="Yes, Delete">
                        <button type="reset" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">No, Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script type="text/javascript">
        $('.delete-button').click(function(e) {
            e.preventDefault();
            item_id = $(this).data('id');
            $('#user_course_id').val(item_id);
        });

        $('.edit-button').click(function(e) {
            e.preventDefault();
            item_id = $(this).data('id');
            $.ajax({
                type: "GET",
                url: "/cd-admin/edit-user-course/",
                data: {
                    id: item_id
                },
                success: function(response) {
                    console.log(response);
                    $('#id').val(response.id);
                    // $('#course_id').val(response.course_id);
                    $("#course_id").val(response.course_id).change();
                }
            });
        });
    </script>
@endsection