@include('dashboard/header')
            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="content">

                    <!-- Start Content-->
                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body table-responsive">
                                        <h4 class="mt-0 header-title">Tasks History</h4>
                                        <p class="text-muted font-14 mb-3">
                                            List of all Created Tasks.
                                        </p>

                                        <p align="right"><button class="btn btn-sm btn-square btn-primary" data-bs-toggle="modal" data-bs-target="#signup-modal">Create New Task</button></p>
    
                                        @if(session()->has('success'))
                                            <div class="alert alert-primary" role="alert">
                                             {{ session()->get('success') }}
                                            </div>
                                        @endif

                                        @if ($errors->has('email') || $errors->has('password'))
                                            <div class="alert alert-danger" role="alert">
                                            <strong>Error!</strong> {{ $errors->first('email') }}
                                        @endif

                                        <table id="responsive-datatable" class="table table-bordered table-striped table-bordered dt-responsive nowrap">
                                            <thead>
                                            <tr>
                                                <th>Task Name</th>
                                                <th>Description</th>
                                                <th>Due Date</th>
                                                <th>Priority</th>
                                                <th>Status</th>
                                                <th>Assigned To</th>
                                                <th></th>
                                            </tr>
                                            </thead>
    
    
                                            <tbody>
                                            @foreach($tasks as $task)

                                            <tr>
                                                <td>{{ $task->name }}</td>
                                                <td>{{ $task->description }}</td>
                                                <td>{{ $task->due_date }}</td>
                                                <td>@if($task->priority == 0) Low @elseif($task->priority == 1) Medium @elseif($task->priority == 2) High @endif</td>
                                                <td>@if($task->status==0) To-do @elseif($task->status==1) Inprogress @else Completed @endif</td>
                                                <td>@if($task->assigned_to != NULL)  @php $adm = DB::table('users')->where('id', $task->assigned_to)->first(); @endphp {{ $adm->name }} @else <i>No Staff Assigned Yet</i> @endif</td>
                                                <td><a href="{{ route('task.view', $task->id) }}" class="btn btn-sm btn-square btn-warning" style="margin:0.5em">Manage</a> <a onclick="confirmDelete({{ $task->id }})" class="btn btn-sm btn-square btn-danger" style="margin:0.5em">Delete</a> </td>
                                            </tr>
                                                
                                            
                                            @endforeach
                                             </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end row -->



                        
                    </div> <!-- container-fluid -->

                </div> <!-- content -->

                <!-- Footer Start -->
                <footer class="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <script>document.write(new Date().getFullYear())</script> &copy; Tritek Consulting Ltd. 
                            </div>
                            <div class="col-md-6">
                                <div class="text-md-end footer-links d-none d-sm-block">
                                    <a href="javascript:void(0);">About Us</a>
                                    <a href="javascript:void(0);">Help</a>
                                    <a href="javascript:void(0);">Contact Us</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
                <!-- end Footer -->

            </div>

            <!-- ============================================================== -->
            <!-- End Page content -->
            <!-- ============================================================== -->


        </div>
        <!-- END wrapper -->

        <!-- Right Sidebar -->
        <div class="right-bar">

            <div data-simplebar class="h-100">

                <div class="rightbar-title">
                    <a href="javascript:void(0);" class="right-bar-toggle float-end">
                        <i class="mdi mdi-close"></i>
                    </a>
                    <h4 class="font-16 m-0 text-white">Theme Customizer</h4>
                </div>
        
                <!-- Tab panes -->
                <div class="tab-content pt-0">  

                    <div class="tab-pane active" id="settings-tab" role="tabpanel">

                        <div class="p-3">
                            <div class="alert alert-warning" role="alert">
                                <strong>Customize </strong> the overall color scheme, Layout, etc.
                            </div>

                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Color Scheme</h6>
                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="layout-color" value="light"
                                    id="light-mode-check" checked />
                                <label class="form-check-label" for="light-mode-check">Light Mode</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="layout-color" value="dark"
                                    id="dark-mode-check" />
                                <label class="form-check-label" for="dark-mode-check">Dark Mode</label>
                            </div>

                            <!-- Width -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Width</h6>
                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="layout-size" value="fluid" id="fluid" checked />
                                <label class="form-check-label" for="fluid-check">Fluid</label>
                            </div>
                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="layout-size" value="boxed" id="boxed" />
                                <label class="form-check-label" for="boxed-check">Boxed</label>
                            </div>

                            <!-- Menu positions -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Menus (Leftsidebar and Topbar) Positon</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-position" value="fixed" id="fixed-check"
                                    checked />
                                <label class="form-check-label" for="fixed-check">Fixed</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-position" value="scrollable"
                                    id="scrollable-check" />
                                <label class="form-check-label" for="scrollable-check">Scrollable</label>
                            </div>

                            <!-- Left Sidebar-->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Color</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-color" value="light" id="light" />
                                <label class="form-check-label" for="light-check">Light</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-color" value="dark" id="dark" checked/>
                                <label class="form-check-label" for="dark-check">Dark</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-color" value="brand" id="brand" />
                                <label class="form-check-label" for="brand-check">Brand</label>
                            </div>

                            <div class="form-check form-switch mb-3">
                                <input type="checkbox" class="form-check-input" name="leftbar-color" value="gradient" id="gradient" />
                                <label class="form-check-label" for="gradient-check">Gradient</label>
                            </div>

                            <!-- size -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Size</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-size" value="default"
                                    id="default-size-check" checked />
                                <label class="form-check-label" for="default-size-check">Default</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-size" value="condensed"
                                    id="condensed-check" />
                                <label class="form-check-label" for="condensed-check">Condensed <small>(Extra Small size)</small></label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="leftbar-size" value="compact"
                                    id="compact-check" />
                                <label class="form-check-label" for="compact-check">Compact <small>(Small size)</small></label>
                            </div>

                            <!-- User info -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Sidebar User Info</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="sidebar-user" value="true" id="sidebaruser-check" />
                                <label class="form-check-label" for="sidebaruser-check">Enable</label>
                            </div>


                            <!-- Topbar -->
                            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Topbar</h6>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="topbar-color" value="dark" id="darktopbar-check"
                                    checked />
                                <label class="form-check-label" for="darktopbar-check">Dark</label>
                            </div>

                            <div class="form-check form-switch mb-1">
                                <input type="checkbox" class="form-check-input" name="topbar-color" value="light" id="lighttopbar-check" />
                                <label class="form-check-label" for="lighttopbar-check">Light</label>
                            </div>

                            <div class="d-grid mt-4">
                                <button class="btn btn-primary" id="resetBtn">Reset to Default</button>
                            </div>

                        </div>

                    </div>
                </div>

            </div> <!-- end slimscroll-menu-->
        </div>
        <!-- /Right-bar -->

        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>

        <!-- Vendor -->
        <script src="{{ asset('dashboard/libs/jquery/jquery.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/simplebar/simplebar.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/node-waves/waves.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/waypoints/lib/jquery.waypoints.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/jquery.counterup/jquery.counterup.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/feather-icons/feather.min.js') }}"></script>

        <!-- third party js -->
        <script src="{{ asset('dashboard/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons/js/buttons.flash.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-keytable/js/dataTables.keyTable.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/datatables.net-select/js/dataTables.select.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/pdfmake/build/pdfmake.min.js') }}"></script>
        <script src="{{ asset('dashboard/libs/pdfmake/build/vfs_fonts.js') }}"></script>
        <!-- third party js ends -->

        <!-- Datatables init -->
        <script src="{{ asset('dashboard/js/pages/datatables.init.js') }}"></script>

        <!-- App js -->
        <script src="{{ asset('dashboard/js/app.min.js') }}"></script>
        

                                                <!-- Signup modal content -->
                                                <div id="signup-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
    
                                                    <div class="modal-body">
                                                        <h4 align="center">Create New Task</h4>
    
                                                        <form class="px-3" action="{{ route('tasks.create') }}" method="POST">
                                                            @csrf
    
                                                            <div class="mb-3">
                                                                <label for="username" class="form-label">Task</label>
                                                                <input class="form-control" type="text" name="name" id="username" required="">
                                                            </div>
    
                                                            <div class="mb-3">
                                                                <label for="emailaddress" class="form-label">Description</label>
                                                                <textarea name="description" class="form-control" id="emailaddress" required="" placeholder=""></textarea>
                                                            </div>

                                                            <div class="mb-3">
                                                                <label for="username" class="form-label">Team Member</label>
                                                                <select class="form-control" name="assigned_to">
                                                                    <option>-- Select Team Member --</option>
                                                                    @foreach($developers as $developer)
                                                                    <option value="{{ $developer->id }}">{{ $developer->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>

                                                            <div class="mb-3">
                                                                <label for="username" class="form-label">Start Date</label>
                                                                <input class="form-control" type="date" name="start_date" id="username" required="" placeholder="Michael Zenaty">
                                                            </div>

                                                            

                                                            <div class="mb-3">
                                                                <label for="username" class="form-label">Due Date</label>
                                                                <input class="form-control" type="date" name="due_date" id="username" required="" placeholder="Michael Zenaty">
                                                            </div>
        
                                                            <div class="mb-3">
                                                                <label for="username" class="form-label">Priority</label>
                                                                <select class="form-control" name="priority">
                                                                    <option value="2" selected>High</option>
                                                                    <option value="1">Medium</option>
                                                                    <option value="0">Low</option>                                                                    
                                                                </select>
                                                            </div>


                                                            <div class="mb-3">
                                                                <label for="username" class="form-label">Status</label>
                                                                <select class="form-control" name="status">
                                                                    <option value="0" selected>To Do</option>
                                                                    <option value="1">In-Progress</option>
                                                                    <option value="2">Completed</option>
                                                                </select>
                                                            </div>
    

                                                            <div class="mb-3">
                                                                <label for="username" class="form-label">Resource (&pound;)</label>
                                                                <input class="form-control" type="number" name="resource" id="username" required="" placeholder="Michael Zenaty">
                                                            </div>
                                                                                                                               

                                                            <div class="mb-3">
                                                                <label for="username" class="form-label">GDPR</label>
                                                                <input class="form-control" type="text" name="gdpr" id="username" required="" value="Team Members" disabled>
                                                            </div>
    
                                                            <div class="mb-3 text-center">
                                                                <button class="btn btn-warning" type="submit">Create</button>
                                                            </div>
    
                                                        </form>
    
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal-dialog -->
                                        </div><!-- /.modal -->

                                        <script type="text/javascript">
      function confirmDelete(id) {
          var confirmation = confirm("Are you sure you want to delete Task?");
          if (confirmation) {
              window.location.href = "{{ url('') }}/admin/dashboard/tasks/delete/"+id;
          }
      }
      </script>                               
        <script type="text/javascript" charset="utf-8">
    $(document).ready(function (){
      $(document).idleTimeout({
      redirectUrl: "{{ route('logout.auth') }}",      // redirect to this url on logout. Set to "redirectUrl: false" to disable redirect

      // idle settings
      idleTimeLimit: 30,           // 'No activity' time limit in seconds. 1200 = 20 Minutes
      idleCheckHeartbeat: 2,       // Frequency to check for idle timeouts in seconds

      // optional custom callback to perform before logout
      customCallback: false,       // set to false for no customCallback
      // customCallback:    function () {    // define optional custom js function
          // perform custom action before logout
      // },

      // configure which activity events to detect
      // http://www.quirksmode.org/dom/events/
      // https://developer.mozilla.org/en-US/docs/Web/Reference/Events
      activityEvents: 'click keypress scroll wheel mousewheel mousemove', // separate each event with a space

      // warning dialog box configuration
      enableDialog: true,           // set to false for logout without warning dialog
      dialogDisplayLimit: 300,       // 20 seconds for testing. Time to display the warning dialog before logout (and optional callback) in seconds. 180 = 3 Minutes
      dialogTitle: 'Session Expiration Warning', // also displays on browser title bar
      dialogText: 'Because you have been inactive, your session is about to expire.',
      dialogTimeRemaining: 'Time remaining',
      dialogStayLoggedInButton: 'Stay Logged In',
      dialogLogOutNowButton: 'Log Out Now',

      // error message if https://github.com/marcuswestin/store.js not enabled
      errorAlertMessage: 'Please disable "Private Mode", ',

      // server-side session keep-alive timer
      sessionKeepAliveTimer: 600,   // ping the server at this interval in seconds. 600 = 10 Minutes. Set to false to disable pings
      sessionKeepAliveUrl: window.location.href // set URL to ping - does not apply if sessionKeepAliveTimer: false
      });
    });
  </script>

    </body>

</html>