@extends('backend.layouts.user_master')
@section('title', 'Timesheet')
@section('content')

    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-users icon-gradient bg-mean-fruit"> </i>
                </div>
                <div>Timesheet</div>
                <div class="d-inline-block ml-2">
                @if($isUser=='student')
                    <button class="btn btn-success" onclick="create()"><i
                            class="glyphicon glyphicon-plus"></i>
                        Add Timesheet
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="main-card mb-3 card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="manage_all"
                               class="align-middle mb-0 table table-borderless table-striped table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Project Id</th>
                                <th>Project Title</th>
                                @if($isUser=='guide')
                                <th>Student ID</th>
                                <th>Student Name</th>
                                @endif;
                                <th>Task Details</th>
                                <th>Start Time</th>
                                <th>End Time</th>
                                <th>Status</th>
                                @if($isUser=='guide')
                                <th>Action</th>
                                @endif;
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" ></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        @media screen and (min-width: 768px) {
            #myModal .modal-dialog {
                width: 70%;
                border-radius: 5px;
            }
        }
        .select2-selection__rendered > .select2-selection__choice {
            padding:10px;
        }
        .select2-selection__choice {
            padding:10px;
        }
    </style>
    <script>
        $(function () {
            var getUrlParameter = function getUrlParameter(sParam) {
                var sPageURL = window.location.search.substring(1),
                    sURLVariables = sPageURL.split('&'),
                    sParameterName,
                    i;

                for (i = 0; i < sURLVariables.length; i++) {
                    sParameterName = sURLVariables[i].split('=');

                    if (sParameterName[0] === sParam) {
                        return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
                    }
                }
                return false;
            };
            let colmun=[
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'project_id', name: 'project_id'},
                    {data: 'title', name: 'title'},
                    {data: 'task_details', name: 'task_details'},
                    {data: 'start_time', name: 'start_time'},
                    {data: 'end_time', name: 'end_time'},
                    {data: 'status', name: 'status'},
                ];
            @if($isUser=='guide')
            colmun = [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'project_id', name: 'project_id'},
                    {data: 'title', name: 'title'},
                    {data: 'student_id', name: 'student_id'},
                    {data: 'student_name', name: 'student_name'},
                    {data: 'task_details', name: 'task_details'},
                    {data: 'start_time', name: 'start_time'},
                    {data: 'end_time', name: 'end_time'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action'},
                ]
            @endif;
            var pid = getUrlParameter('pid');
            table = $('#manage_all').DataTable({
                processing: true,
                serverSide: true,
                ajax: '/user/allTimesheet',
                columns: colmun,
                // data:{pid:pid}
                "columnDefs": [
                    {"className": "", "targets": "_all"}
                ],
                "autoWidth": false,
            });
            $('.dataTables_filter input[type="search"]').attr('placeholder', 'Type here to search...').css({
                'width': '220px',
                'height': '30px'
            });
        });
    </script>
    <script type="text/javascript">
        function dateinit(){
            $('input[name="start_time"]').daterangepicker({
                timePicker: true,
                singleDatePicker: true,
                startDate: moment().startOf('hour'),
                locale: {
                format: 'YYYY-MM-DD hh:mm:ss'
                }
            });
            $('input[name="end_time"]').daterangepicker({
                timePicker: true,
                singleDatePicker: true,
                startDate: moment().startOf('hour'),
                locale: {
                format: 'YYYY-MM-DD hh:mm:ss'
                }
            });
        }
        function create() {
            ajax_submit_create('timesheet');
             setTimeout(() => {
                $('input[name="start_time"]').daterangepicker({
                    timePicker: true,
                    singleDatePicker: true,
                    startDate: moment().startOf('hour'),
                    locale: {
                    format: 'YYYY-MM-DD hh:mm:ss'
                    }
                 });
                $('input[name="end_time"]').daterangepicker({
                    timePicker: true,
                    singleDatePicker: true,
                    startDate: moment().startOf('hour'),
                    locale: {
                    format: 'YYYY-MM-DD hh:mm:ss'
                    }
                });
             }, 1000);
        }

        $(document).ready(function () {
            // View Form
            $("#manage_all").on("click", ".view", function () {
                var id = $(this).attr('id');
                ajax_submit_view('timesheet', id);
                setTimeout(() => {
                
                $("#assign_guide").select2({
                   placeholder: 'Select an guide'
                })
                $("#assign_student").select2({
                   placeholder: 'Select an student'
                })
                
            }, 1000);
            setTimeout(() => {
                $(".select2-selection__choice").css("padding","10px");
            }, 1500);
            });

            // Edit Form
            $("#manage_all").on("click", ".edit", function () {
                var id = $(this).attr('id');
                ajax_submit_edit('projects', id)
                setTimeout(() => {
                
                $("#assign_guide").select2({
                   placeholder: 'Select an guide'
                })
                $("#assign_student").select2({
                   placeholder: 'Select an student'
                })
            }, 1000);
            });


            // Delete
            $("#manage_all").on("click", ".delete", function () {
                var id = $(this).attr('id');
                ajax_submit_delete('timesheet', id)
            });
            $("#manage_all").on("click", ".approve", function () {
                var id = $(this).attr('id');

                swal({
                    title: "Are you sure?",
                    text: "Approve Timesheet",
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                    showCancelButton: true,
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Approve"
                }, function () {
                    $.ajax({
                        url: '/user/statuschange',
                        type: 'POST',
                        data:{id,status:1},
                        headers: {
                            "X-CSRF-TOKEN": CSRF_TOKEN,
                        },
                        "dataType": 'json',
                        success: function (data) {
                            if (data.type === 'success') {
                                swal("Done!", "Timesheet Approved Successfully", "success");
                                reload_table();
                            } else if (data.type === 'danger') {
                                swal("Error deleting!", "Try again", "error");
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            swal("Error deleting!", "Try again", "error");
                        }
                    });
                });
            });
            $("#manage_all").on("click", ".reject", function () {
                var id = $(this).attr('id');
                swal({
                    title: "Are you sure?",
                    text: "Reject Timesheet",
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                    showCancelButton: true,
                    confirmButtonClass: "btn-danger",
                    confirmButtonText: "Reject"
                }, function () {
                    $.ajax({
                        url: '/user/statuschange',
                        type: 'POST',
                        data:{id,status:2},
                        headers: {
                            "X-CSRF-TOKEN": CSRF_TOKEN,
                        },
                        "dataType": 'json',
                        success: function (data) {
                            if (data.type === 'success') {
                                swal("Done!", "Timesheet Rejected Successfully", "success");
                                reload_table();
                            } else if (data.type === 'danger') {
                                swal("Error deleting!", "Try again", "error");
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            swal("Error deleting!", "Try again", "error");
                        }
                    });
                });
            });

        });
        
    </script>
@stop