@extends('inventory.layout') 
@section('title', 'User Check List')
@section('content')
 @push('head')
    <!-- plugins:css -->
    <link rel="stylesheet" href="assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
    <!-- endinject -->
    
    <style>

/ Style the tab /
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/ Style the buttons inside the tab /
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/ Change background color of buttons on hover /
.tab button:hover {
  background-color: #ddd;
}

/ Create an active/current tablink class /
.tab button.active {
  background-color: #ccc;
}

/ Style the tab content /
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tradeadd{
        background-color: #2dce89!important;
        border-color: #2dce89!important;
        color:#fff !important;
        padding: 6px 14px !important;
    }

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
/*
tr:nth-child(even) {
  background-color: #dddddd;
}*/
#content1::after{
    content: "\a";
    white-space: pre;
    }
    #title:after{
        content: "\a";
        white-space: pre;
    }
    #desc{
        color: #D3D3D3 !important;
    }

</style>
    <!-- Layout styles -->
    <link rel="stylesheet" href="{{ url('assets/css/style.css')}}">
    <link rel="stylesheet" href="{{ url('assets/css/custom.css')}}">
    <!-- End layout styles -->
    <link rel="shortcut icon" href="{{ url('assets/images/favicon.ico')}}" />
@endpush

    <div class="container-scroller">

      <!-- partial:partials/_navbar.html -->
     
      <!-- partial -->
    <div class="container-fluid">
       
        <div class="main-panel" style="width: 100%;">
           <div class="content-wrapper">
            <div class="page-header">
              <h3 class="page-title">
                  Check List For Post "{{isset($postname->name) ? $postname->name:''}}" For '{{isset($username->name) ? $username->name:''}}'
              </h3>
              
            </div>



            <div class="row enq-tab">
              <div class="accordion" id="myAccordion">
                
                
                
               
                
              
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne1">
                        <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne1">Check List For Post "{{isset($postname->name) ? $postname->name:''}}" For '{{isset($username->name) ? $username->name:''}}'</button>
                    </h2>
                    <div id="collapseOne1" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
                        <div class="card-body">

                        <!-- Accept and reject checkbox start -->
                        <table id="product_table_1" class="table">
                            <thead>
                                <tr>
                                    <th>{{ __('Sr. No')}}</th>
                                    <th>{{ __('Checklist Name')}}</th>
                                    <!-- <th>{{ __('Description')}}</th> -->
                                     <th>{{ __('Checklist Items')}}</th>
                                    <th style="width: 90px;!important">{{ __('Action')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                
                               @foreach($checklists as $j=>$lists)
                                <tr>

                                    <td>{{ $j+1 }}</td>
                                    
                                    <td><span id="title">{{ \Illuminate\Support\Str::limit($lists->title,50) }}</span><span id="desc">{{ \Illuminate\Support\Str::limit($lists->description, 50) }}</span></td>

                                    <!-- <td></td> --> 

                                    <td> <span id="content1">Total: {{isset($lists->checklistcount['checklist_count']) ? $lists->checklistcount['checklist_count']:'0' }}</span>
                                    @if(isset($newval))
                                    @foreach($newval as $val)
                                  
                                    
                                    @if(in_array($val->id_checklist, $checklistsid))
                                    @if($val->id_checklist == $lists->id)
                                    {{--@if($val->id_checklist == $lists->id)--}}
                                        <span id="content2">Completed: {{$val->total}} | Pending: {{($lists->checklistcount['checklist_count']) - ($val->total)}}</span>
                                    
                                    @else
                                    
                                        <span id="content2">Completed: 0 | Pending: {{isset($lists->checklistcount['checklist_count']) ? $lists->checklistcount['checklist_count'] :'0' }}</span> 
                                    @endif
                                    @endif
                                    @endforeach
                                    @else
                                        <span id="content2">Completed: 0 | Pending: {{isset($lists->checklistcount['checklist_count']) ? $lists->checklistcount['checklist_count'] :'0' }}</span> 
                                    @endif
                                    </td>
                                    
                                    
                                    <td> 

                                        <a href="{{url('user/show'.'/'.$lists->id.'/'.$user_id) }}"  ><i class="fa fa-paper-plane  text-green"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                        <!-- <a href="{{route('userchecklist.edit', $lists->id) }}"  ><i class="ik ik-edit-2  text-green"></i></a> --> 
                                        
                                    </td>
                                </tr>
                              @endforeach
                                
                            </tbody>
                        </table>
                        

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

            </div>

        </div>
          <!-- content-wrapper ends -->
          <!-- partial:partials/_footer.html -->
          
          <!-- partial -->
       
        <!-- main-panel ends -->
    </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    @push('script')
    <script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
   
    <script src="{{ url('assets/vendors/js/vendor.bundle.base.js')}}"></script>
    <!-- endinject -->
    <!-- Plugin js for this page -->
    <script src="{{ url('assets/vendors/chart.js/Chart.min.js')}}"></script>
    <script src="{{ url('assets/js/jquery.cookie.js')}}" type="text/javascript"></script>
    <!-- End plugin js for this page -->
    <!-- inject:js -->
    <script src="{{ url('assets/js/off-canvas.js')}}"></script>
    <script src="{{ url('assets/js/hoverable-collapse.js')}}"></script>
    <script src="{{ url('assets/js/misc.js')}}"></script>
    <!-- endinject -->
    <!-- Custom js for this page -->
    <script src="{{ url('assets/js/dashboard.js')}}"></script>
    <script src="{{ url('assets/js/todolist.js')}}"></script>
    <!-- End custom js for this page -->

    <script>

    </script>
  @endpush
 @endsection