@extends('employee.employee-layouts.master')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 tile" id="tile-1">
                <ul class="nav nav-tabs nav-justified" role="tablist">
                    <div class="slider"></div>
                    <li class="nav-item bg-secondary">
                        <a class="nav-link active text-white" id="home-tab" data-toggle="tab" href="#home" role="tab"
                            aria-controls="home" aria-selected="true"><i
                                class="fas fa-spinner mr-2"></i></i>{{ __('In Progress') }}</a>
                    </li>
                    <li class="nav-item bg-primary">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                            aria-controls="profile" aria-selected="false"><i class="fas fa-tasks mr-2"></i></i>
                            {{ __('To Do') }}</a>
                    </li>
                    <li class="nav-item bg-success">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                            aria-controls="contact" aria-selected="false"><i class="fas fa-check-circle mr-2"></i>
                            {{ __('Complete') }}</a>
                    </li>

                </ul>

                <div class="tab-content">

                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

                        <div class="row">
                            @forelse ($inProgress as $progress)
                                <div class="col-xl-6 col-md-6 col-12 mb-3">
                                    <div class="shadow card h-100">
                                        <div class="card-header bg-primary row"
                                            style="justify-content: space-between;align-items: center;margin: 0">
                                            <p class="text-white text-center col-lg-5">{{ $progress->name }}</p>
                                            <form class="col-lg-5 progress_status_form" method="post">
                                                @csrf
                                                <div class="input-group">
                                                    <select name="status" class="form-control changeStatus"
                                                        task_id="{{ $progress->id }}">
                                                        <option value="inprogress"
                                                            @if ($progress->status == 'inprogress') selected @endif>In Progress
                                                        </option>
                                                        <option value="todo"
                                                            @if ($progress->status == 'todo') selected @endif>To Do</option>
                                                        <option value="finished"
                                                            @if ($progress->status == 'finished') selected @endif>Finished
                                                        </option>
                                                    </select>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="card-body">
                                            <div class="">
                                                <p>{{ $progress->description }}</p>

                                                <table class="table table-bordered text-center w-100">
                                                    <tr>
                                                        <th class="bg-success text-white">{{ __('Start Date') }}</th>
                                                        <th class="bg-danger text-white">{{ __('End Date') }}</th>
                                                        <th class="bg-primary text-white">{{ __('Priority') }}</th>
                                                    </tr>
                                                    <tr>
                                                        <td>{{ $progress->startdate }}</td>
                                                        <td>{{ $progress->enddate }}</td>
                                                        <td>
                                                            {{ $progress->priority }}
                                                        </td>
                                                    </tr>
                                                </table>

                                                @if (count($progress->comments) > 0)
                                                    <div class="commentbox"
                                                        style="border:0.2px solid gray;border-radius: 10px;padding: 8px;">
                                                        <ul>

                                                            @forelse ($progress->comments as $com)
                                                                <li><span
                                                                        style="font-size: 13px;font-weight:bold">{{ $com->user->name }}:</span>
                                                                    <br> &nbsp;&nbsp; <span
                                                                        style="font-style: italic;font-size: 14px">{{ $com->comment }}</span>
                                                                    <br> &nbsp;&nbsp;
                                                                    <span style="font-size: 12px">Date:
                                                                        {{ Carbon\Carbon::parse($com->created_at)->format('Y, M, d ') }}</span>
                                                                </li>
                                                            @empty
                                                            @endforelse
                                                        </ul>
                                                    </div>
                                                @endif

                                                <br>
                                                <button class="btn btn-sm btn-primary add_comment_btn"
                                                    task_id="{{ $progress->id }}" task_title="{{ $progress->name }}">Add
                                                    Comment</button>



                                            </div>
                                        </div>

                                    </div>
                                </div>
                            @empty

                                <div class="mainbox">

                                    <i class="icon-not-found fas fa-sad-tear"></i>

                                    <div class="msg">
                                        <p>{{ __('No In Progrees Task Is Available ') }}</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>



                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="row">
                            @forelse ($todo as $todo)
                                <div class="col-xl-6 col-md-6 col-12 mb-3">
                                    <div class="shadow card h-100">
                                        <div class="card-header bg-primary">
                                            <div class="card-header bg-primary row"
                                                style="justify-content: space-between;align-items: center;margin: 0">
                                                <p class="text-white text-center col-lg-5">{{ $todo->name }}</p>
                                                <form class="col-lg-5 progress_status_form" method="post">
                                                    @csrf
                                                    <div class="input-group">
                                                        <select name="status" class="form-control changeStatus"
                                                            task_id="{{ $todo->id }}">
                                                            <option value="inprogress"
                                                                @if ($todo->status == 'inprogress') selected @endif>In
                                                                Progress
                                                            </option>
                                                            <option value="todo"
                                                                @if ($todo->status == 'todo') selected @endif>To Do
                                                            </option>
                                                            <option value="finished"
                                                                @if ($todo->status == 'finished') selected @endif>Finished
                                                            </option>
                                                        </select>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="">
                                                <p>{{ $todo->description }}</p>

                                                <table class="table table-bordered text-center w-100">
                                                    <tr>
                                                        <th class="bg-success text-white">{{ __('Start Date') }}</th>
                                                        <th class="bg-danger text-white">{{ __('End Date') }}</th>
                                                        <th class="bg-primary text-white">{{ __('Priority') }}</th>
                                                    </tr>
                                                    <tr>
                                                        <td>{{ $todo->startdate }}</td>
                                                        <td>{{ $todo->enddate }}</td>
                                                        <td>
                                                            {{ $todo->priority }}
                                                        </td>
                                                    </tr>
                                                </table>

                                                @if (count($todo->comments) > 0)
                                                    <div class="commentbox"
                                                        style="border:0.2px solid gray;border-radius: 10px;padding: 8px;">
                                                        <ul>

                                                            @forelse ($todo->comments as $d_com)
                                                                <li><span
                                                                        style="font-size: 13px;font-weight:bold">{{ $d_com->user->name }}:</span>
                                                                    <br> &nbsp;&nbsp; <span
                                                                        style="font-style: italic;font-size: 14px">{{ $d_com->comment }}</span>
                                                                    <br> &nbsp;&nbsp;
                                                                    <span style="font-size: 12px">Date:
                                                                        {{ Carbon\Carbon::parse($d_com->created_at)->format('Y, M, d ') }}</span>
                                                                </li>
                                                            @empty
                                                            @endforelse
                                                        </ul>
                                                    </div>
                                                @endif

                                                <br>
                                                <button class="btn btn-sm btn-primary add_comment_btn"
                                                    task_id="{{ $todo->id }}" task_title="{{ $todo->name }}">Add
                                                    Comment</button>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            @empty

                                <div class="mainbox">

                                    <i class="icon-not-found fas fa-sad-tear"></i>

                                    <div class="msg">
                                        <p>{{ __('No Todo Task Is Available ') }}</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>



                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <div class="row">
                            @forelse ($finished as $finished)
                                <div class="col-xl-6 col-md-6 col-12 mb-3">
                                    <div class="shadow card h-100">
                                        <div class="card-header bg-primary">
                                            <div class="card-header bg-primary row"
                                                style="justify-content: space-between;align-items: center;margin: 0">
                                                <p class="text-white text-center col-lg-5">{{ $finished->name }}</p>
                                                <form class="col-lg-5 progress_status_form" method="post">
                                                    @csrf
                                                    <div class="input-group">
                                                        <select name="status" class="form-control changeStatus"
                                                            task_id="{{ $finished->id }}">
                                                            <option value="inprogress"
                                                                @if ($finished->status == 'inprogress') selected @endif>In
                                                                Progress
                                                            </option>
                                                            <option value="todo"
                                                                @if ($finished->status == 'todo') selected @endif>To Do
                                                            </option>
                                                            <option value="finished"
                                                                @if ($finished->status == 'finished') selected @endif>Finished
                                                            </option>
                                                        </select>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="">
                                                <p>{{ $finished->description }}</p>

                                                <table class="table table-bordered text-center w-100">
                                                    <tr>
                                                        <th class="bg-success text-white">{{ __('Start Date') }}</th>
                                                        <th class="bg-danger text-white">{{ __('End Date') }}</th>
                                                        <th class="bg-primary text-white">{{ __('Priority') }}</th>
                                                    </tr>
                                                    <tr>
                                                        <td>{{ $finished->startdate }}</td>
                                                        <td>{{ $finished->enddate }}</td>
                                                        <td>
                                                            {{ $finished->priority }}
                                                        </td>
                                                    </tr>
                                                </table>

                                                @if (count($finished->comments) > 0)
                                                    <div class="commentbox"
                                                        style="border:0.2px solid gray;border-radius: 10px;padding: 8px;">
                                                        <ul>

                                                            @forelse ($finished->comments as $f_com)
                                                                <li><span
                                                                        style="font-size: 13px;font-weight:bold">{{ $f_com->user->name }}:</span>
                                                                    <br> &nbsp;&nbsp; <span
                                                                        style="font-style: italic;font-size: 14px">{{ $f_com->comment }}</span>
                                                                    <br> &nbsp;&nbsp;
                                                                    <span style="font-size: 12px">Date:
                                                                        {{ Carbon\Carbon::parse($f_com->created_at)->format('Y, M, d ') }}</span>
                                                                </li>
                                                            @empty
                                                            @endforelse
                                                        </ul>
                                                    </div>
                                                @endif


                                                <br>
                                                <button class="btn btn-sm btn-primary add_comment_btn"
                                                    task_id="{{ $finished->id }}" task_title="{{ $finished->name }}">Add
                                                    Comment</button>




                                            </div>
                                        </div>

                                    </div>
                                </div>
                            @empty

                                <div class="mainbox">

                                    <i class="icon-not-found fas fa-sad-tear"></i>

                                    <div class="msg">
                                        <p>{{ __('No Complete Task Is Available ') }}</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>

                </div>
            </div>
        </div>




        <!-- Modal -->
        <div class="modal fade" id="addComment" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title task_title"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="/save" class="storeCommentForm">
                            <input type="hidden" name="task_id" class="inputTaskID">
                            <div class="input-group">

                                <textarea name="comment" class="form-control comment" placeholder="Comment..." cols="30" rows="10"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary btn_save">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {


            $('.add_comment_btn').click(function() {
                let task_id = $(this).attr('task_id');
                let task_title = $(this).attr('task_title');
                $('.task_title').html(task_title);
                $('.inputTaskID').val(task_id);
                $('#addComment').modal('show');
            });

            $('.btn_save').click(function() {
                // $('.storeCommentForm').submit();
                let _token = '{{ csrf_token() }}';
                const comment = $('.comment').val();
                const task_id = $('.inputTaskID').val();
                $('.btn_save').attr('disabled', true);
                $('.btn_save').html('Please Wait');
                $.ajax({
                    url: '{{ route('employee.task.comment.store') }}',
                    type: 'POST',
                    data: {
                        _token: _token,
                        comment: comment,
                        task_id: task_id
                    },
                    success: function(response) {
                        console.log(response);
                        location.reload();
                    },
                    error: function(error) {
                        console.log(error);
                        location.reload();
                    }
                });
            });


            $('.changeStatus').change(function() {

                let _token = '{{ csrf_token() }}';
                const task_id = $(this).attr('task_id');
                const status = $(this).find('option:selected').val();
                $.ajax({
                    url: '{{ route('employee.task.change.status') }}',
                    type: 'POST',
                    data: {
                        _token: _token,
                        task_id: task_id,
                        status: status
                    },
                    success: function(response) {
                        console.log(response);
                        location.reload();
                    },
                    error: function(error) {
                        console.log(error);
                        location.reload();
                    }
                });


            });
        });
    </script>
@endpush

@push('style')
    <style>
        .tile {
            width: 100%;
            margin: 60px auto;
        }

        #tile-1 .tab-pane {
            padding: 15px 0;
        }

        #tile-1 .nav-tabs {
            position: relative;
            border: none !important;
            background-color: #fff;
            border-radius: 6px;
        }

        #tile-1 .nav-tabs li {
            margin: 0px !important;
        }

        #tile-1 .nav-tabs li a {
            position: relative;
            margin-right: 0px !important;
            padding: 20px 40px !important;
            font-size: 16px;
            border: none !important;
            color: rgb(255, 255, 255);
        }



        #tile-1 .slider {
            display: inline-block;
            width: 30px;
            height: 4px;
            border-radius: 3px;
            background-color: #281463;
            position: absolute;
            z-index: 1;
            bottom: 0;
            transition: all .4s linear;

        }

        @media (max-width: 575.98px) {
            .slider {
                display: none !important;
            }
        }

        #tile-1 .nav-tabs .active {
            background-color: transparent !important;
            border: none !important;
            color: #ffffff !important;
        }


        .mainbox {
            margin: auto;
            height: 280px;
            width: 100%;
            position: relative;
        }



        .icon-not-found.fas {
            position: absolute;
            font-size: 8.5rem;
            left: 45%;
            top: 10%;
            color: #622c87;
        }

        .msg {
            text-align: center;
            font-family: "Nunito Sans", sans-serif;
            font-size: 1.6rem;
            position: absolute;
            left: 16%;
            top: 65%;
            width: 75%;

        }
    </style>
@endpush

@push('script')
    <script>
        'use strict'
        $(function() {
            $("#tile-1 .nav-tabs a").on('click', function() {
                var position = $(this).parent().position();
                var width = $(this).parent().width();
                $("#tile-1 .slider").css({
                    "left": +position.left,
                    "width": width
                });
            });
            var actWidth = $("#tile-1 .nav-tabs").find(".active").parent("li").width();
            var actPosition = $("#tile-1 .nav-tabs .active").position();
            $("#tile-1 .slider").css({
                "left": +actPosition.left,
                "width": actWidth
            });
        })
    </script>
@endpush