@extends('layouts.admin')
@section('content')
    <style>

    </style>
    <div class="card">
        <div class="card-header">
            {{ trans('cruds.course.title_singular') }} {{ trans('global.list') }}
        </div>

        <div class="card-body">
            <div class="">
                <table class="table table-bordered data-table">
                    <thead>
                        <tr>
                            <th>
                                {{ trans('cruds.course.fields.course_code') }}
                            </th>
                            <th>
                                {{ trans('cruds.course.fields.title') }}
                            </th>
                            <th>
                                {{ trans('cruds.course.fields.type_course') }}
                            </th>
                            <th>
                                {{ trans('cruds.course.fields.course_duration') }}
                            </th>

                            <th>
                                {{ trans('cruds.course.fields.course_start') }}
                            </th>
                            <th>
                                {{ trans('cruds.course.fields.course_end') }}
                            </th>

                            <th>
                                Action
                            </th>
                        </tr>
                    </thead>

                </table>


            </div>
        </div>
    </div>
    <!-- MODAL FOR MY ASSIGNMENT -->
    <div class="modal fade" id="myassignmentModal" tabindex="-1" role="dialog" aria-labelledby="myassignment"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>My Assignment Info</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mt-2">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Assignment</th>
                                    <th>Submit Assignment</th>
                                </tr>
                            </thead>
                            <tbody id="singleAssignmentFile"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- MODAL FOR MY GROUP ASSIGNMENT -->
    <div class="modal fade" id="groupassignmentModal" tabindex="-1" role="dialog" aria-labelledby="groupassignment"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Group Assignment Info</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mt-2">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Assignment</th>
                                    <th>Submit Assignment</th>
                                </tr>
                            </thead>
                            <tbody id="groupAssignmentFile"></tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    @parent
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

    <script>
        $(document).ready(function() {

            var table = $('.data-table').DataTable({
                "ordering": false,
                processing: true,
                serverSide: true,
                ajax: "{{ url('all-courses') }}",
                columns: [{
                        data: 'course_code',
                        name: 'course_code'
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'type_course',
                        name: 'type_course'
                    },
                    {
                        data: 'course_duration',
                        name: 'course_duration',
                        render: function(data, type, row) {
                            return data + ' Days';
                        }
                    },
                    {
                        data: 'course_start',
                        name: 'course_start',
                        // render: function(data, type, row) {
                        //     console.log(data);
                        //     return moment(data).format('DD-MM-YYYY');
                        // }
                    },
                    {
                        data: 'course_end',
                        name: 'course_end',
                        // render: function(data, type, row) {
                        //     console.log(data);
                        //     return moment(data).format('DD-MM-YYYY');
                        // }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });


            $('.data-table tbody').on('click', 'a.delete-course', function(e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        var href = $(this).attr('href');
                        $.ajax({
                            method: "POST",
                            url: href,
                            dataType: "json",
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                })
            });

            $('.data-table tbody').on('click', 'a.deny-course', function(e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, Confirm!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        var href = $(this).attr('href');
                        $.ajax({
                            method: "POST",
                            data: {
                                approved: 2
                            },
                            url: href,
                            dataType: "json",
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                })
            });


            $('.data-table tbody').on('click', 'a.take-course', function(e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, Confirm!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        var href = $(this).attr('href');
                        $.ajax({
                            method: "POST",
                            url: href,
                            data: {
                                approved: 1
                            },
                            dataType: "json",
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                })
            });
        });

        // ASSIGNMENT FILE DATA FOR SINGLE    
        function singleAssignmentModal(id) {
            $.ajax({
                type: 'GET',
                url: '/get-myAssignment/' + id,
                dataType: 'json',
                success: function(response) {
                    var rows = "";
                    $.each(response.assignments, function(key, value) {

                        if (value.assignment_submissions != null) {
                            rows += `<tr>
                            <td>${key+1}</td>
                            <td><a href="/upload/files/${value.file}" target="_blank">${value.name}</a></td>
                            <td>
                                    <div class="form-group" style="display:flex;gap:20px">                                               
                                    <button class="btn btn-sm btn-success" disabled>Submited</button>                                             
                                    </div>                                                            
                        </td>
				</tr>`
                        } else if (new Date(value.submission_last_date).getTime() < new Date()
                            .getTime()) {

                            rows += `<tr>
                                <td>${key+1}</td>
                                <td><a href="/upload/files/${value.file}" target="_blank">${value.name}</a></td>
                                <td>
                                        <div class="form-group" style="display:flex;gap:20px">                                               
                                        <button class="btn btn-sm btn-success" disabled>submission time is over</button>                                             
                                        </div>                                                            
                            </td>
                    </tr>`
                        } else {
                            rows += `<tr>
                            <td>${key+1}</td>
                            <td><a href="/upload/files/${value.file}" target="_blank">${value.name}</a></td>
                            <td>
                        <form action="{{ route('assignment-submission') }}"  method="POST" enctype="multipart/form-data">  
                            @csrf
                            <div class="row" id="form${value.id}">
                                <div class="col-12">
                                    <div class="form-group" style="display:flex;gap:20px">                                               
                                        
                                        <input type="hidden" name="assignment_file_id" value="${value.id}">   
                                        <input type="file" name="file" class="form-control">   
                                    <button class="btn btn-sm btn-success">Submit</button>                                             
                                    </div>
                                </div>
                            </div>                                                    
                        </form>
                        </td>
				</tr>`
                        }

                    });
                    $('#singleAssignmentFile').html(rows);
                }
            })
            $('#myassignmentModal').modal('show');
        }
        //  GROUP ASSIGNMENT DATA
        function groupAssignmentModal(id) {
            $.ajax({
                type: 'GET',
                url: '/get-groupAssignment/' + id,
                dataType: 'json',
                success: function(response) {
                    console.log(response);
                    var rows = ""
                    $.each(response.groupassignments, function(key, value) {
                        if (value.assignment_submissions != null) {
                            rows += `<tr>
                            <td>${key+1}</td>
                            <td><a href="/upload/files/${value.file}" target="_blank">${value.name}</a></td>
                            <td>                        
                                    <div class="form-group" style="display:flex;gap:20px">                                                 
                                    <button class="btn btn-sm btn-success" disabled>Submited</button>                                             
                                    </div>                                                                                                       
                        </td>
				</tr>`
                        } else if (new Date(value.submission_last_date).getTime() < new Date()
                            .getTime()) {

                            rows += `<tr>
                               <td>${key+1}</td>
                               <td><a href="/upload/files/${value.file}" target="_blank">${value.name}</a></td>
                               <td>
                                       <div class="form-group" style="display:flex;gap:20px">                                               
                                       <button class="btn btn-sm btn-success" disabled>submission time is over</button>                                             
                                       </div>                                                            
                           </td>
                   </tr>`
                        } else {
                            rows += `<tr>
                            <td>${key+1}</td>
                            <td><a href="/upload/files/${value.file}" target="_blank">${value.name}</a></td>
                            <td>
                        <form action="{{ route('assignment-submission') }}"  method="POST" enctype="multipart/form-data">  
                            @csrf
                            <div class="row" id="form${value.id}">
                                <div class="col-12">
                                    <div class="form-group" style="display:flex;gap:20px">                                               
                                        
                                        <input type="hidden" name="assignment_file_id" value="${value.id}">   
                                        <input type="file" name="file" class="form-control">   
                                    <button class="btn btn-sm btn-success">Submit</button>                                             
                                    </div>
                                </div>
                            </div>                                                    
                        </form>
                        </td>
				</tr>`
                        }

                    });
                    $('#groupAssignmentFile').html(rows);
                }
            })
            $('#groupassignmentModal').modal('show');
        }

        function myAssignment(id) {
            $("#form" + id).toggle('slow');
        }
    </script>
@endsection