@include('header')
      <!-- partial -->
      <div class="main-panels">
        <div class="content-wrapper">

        @if(session()->has('success'))
    <div class="alert alert-success" role="alert">
    <strong>Congratulations!</strong> {{ session()->get('success') }}
    </div>
@endif

@php $q = 0; @endphp 

          <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <p class="card-title" align="center">My Job Progress Page</p>
                  <br/>
                  <p align="left"><a href="{{ route('staff.dashboard') }}"><button class="btn btn-secondary" style="color:#fff">Back</button></a></p>
                  <div class="row">
                    <div class="col-12">
                      <div class="table-responsive">
                        <table id="example" class="display expandable-table dataTables-example" style="width:100%">
                          <thead>
                          <th>S/N</th> 
                                    <th>Client</th> 
                                    <th>Service</th> 
                                    <th>Date</th> 
                                    <th>Status</th> 
                              <th></th>
                            </tr>
                          </thead>
                          <tbody> 
                            @foreach($tasks as $task)
                            @php
                            $booking = DB::table('bookings')->where('id',$task->booking_id)->first();
                                $client = DB::table('clients')->where('id',$booking->client_id)->first();
                                $q++;
                                @endphp

                                <tr> 
                                    <th scope="row">{{ $q }}</th>
                                    <th>{{ $client->name }}</th> 
                                    <td>{{ $booking->service }}</td> 
                                    <td>{{ $booking->start }}</td> 
                                    @php
                                      $service = DB::table('services')->where('service',$booking->service)->first();
                                    @endphp

                                @php
                                    $task = DB::table('tasks')->where('booking_id',$booking->id)->first();
                                @endphp
                                @if($task != null)
                                      <td>@if($task->status == 0) {{ 'Pending' }} @elseif($task->status == 1) {{ 'Ongoing' }} @else {{ 'Completed' }} @endif</td>
                                @else
                                      <td>  Not Assigned to any Staff Yet"
                                    <td>Pending</td>
                                    @endif 

                                    @if($task->status == 2)
                                    <td><a href="jobs/review/{{ $booking->id }}"><button class="btn btn-secondary btn-ls" style="padding:0.7em;color:#fff">Send Review Request to Customer</button></a></td>
                                    @elseif($task->status == 1)
                                    <td><a href="jobs/actions/completed/{{ $task->id }}"><button class="btn btn-success btn-ls" style="padding:0.7em;">Mark Job as Completed</button></a></td>
                                    @else
                                    <td><a href="jobs/actions/start/{{ $task->id }}"><button class="btn btn-primary btn-ls" style="padding:0.7em;">Start Job</button></a></td>
                                    @endif
                                </tr> 

                            @endforeach
                            </tbody>                       </table>
                      </div>
                    </div>
                  </div>
                  </div>
                </div>

                
              </div>
            </div>
        </div-->
        <!-- content-wrapper ends -->
        <!-- partial: -->
        <footer class="footer">
          <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block"><p align="center" class="mb-0">Copyright &copy; Tritek Consulting Ltd 2022 </p>  </span>
          </div>
        </footer>
        <!-- partial -->

      </div>
      <!-- main-panel ends -->
    </div>   
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="{{ asset('vendors/js/vendor.bundle.base.js') }}"></script>
  <!-- endinject -->
  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/typeahead.js/typeahead.bundle.min.js') }}"></script>
  <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
  <!-- End plugin js for this page -->
  <!-- inject:js -->
  <script src="{{ asset('js/off-canvas.js') }}"></script>
  <script src="{{ asset('js/hoverable-collapse.js') }}"></script>
  <script src="{{ asset('js/template.js') }}"></script>
  <script src="{{ asset('js/settings.js') }}"></script>
  <script src="{{ asset('js/todolist.js') }}"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/file-upload.js') }}"></script>
  <script src="{{ asset('js/typeahead.js') }}"></script>
  <script src="{{ asset('js/select2.js') }}"></script>
  <!-- End custom js for this page-->

  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/chart.js/Chart.min.js') }}"></script>
  <!-- Custom js for this page>
  <script src="{{ asset('js/chart.js') }}"></script-->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/dashboards.js') }}"></script>
  <script src="{{ asset('js/Chart.roundedBarCharts.js') }}"></script>
  <!-- End custom js for this page-->
  <script src="{{ asset('js/dataTables/datatables.min.js') }}"></script>
  <script>
        $(document).ready(function(){
            $('.dataTables-example').DataTable({
                pageLength: 25,
                responsive: true,
                dom: '<"html5buttons"B>lTfgitp',
                buttons: [
                    {extend: 'copy'},
                    {extend: 'csv'},
                    {extend: 'excel', title: 'Payments'},
                    {extend: 'pdf', title: 'Payments'},

                    {extend: 'print',
                     customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                    }
                    }
                ]

            });

        });

    </script>
  <!-- End custom js for this page-->


</body>

</html>