@include('inc.header-inc')
<style>
   th {
      font-size: 1em !important;
   }
   table.dataTable tbody td {
      font-size: 15px;
   }
   input[type="search"]{
      color:var(--text-color);
   }
   .form-select, .form-control, #searchInput{
      background-color: var(--body-color) !important;
      color:var(--text-color);
   }
   /* body.dark .form-group{
      background-color:var(--sidebar-color) !important;
   } */
   .select2-container--default .select2-selection--single{
      background-color: var(--sidebar-color) !important;
      color: var(--text-color) !important;
   }
   .select2-container--open .select2-dropdown--below{
      background-color: var(--sidebar-color) !important;
      color: var(--text-color) !important;
   }
   .dataTables_filter{
      margin-bottom: 12px;
   }
   .select2-container--default .select2-selection--single .select2-selection__arrow{
      width: 100%;
      font-size: 1.3em;
      padding: 25px 12px;
      height: 27px;
      position: absolute;
      top: 0px;
      right: 0px;
      width: 20px;
      transition: var(--tran-03);
   }
   .select2-container--default .select2-selection--single{
      padding: 10px 5px !important;
      height: 57px !important;
      width: 100%; 
      font-size: 16px;  
      position: relative;
   }
   .select2-container--default .select2-selection--single .select2-selection__arrow
   {
      width: 100%;
      font-size: 1.3em;
      padding: 25px 12px;
      height: 27px;
      position: absolute;
      top: 0px;
      right: 0px;
      width: 20px;
   }
   .select2-container--default .select2-selection--single .select2-selection__rendered {
      text-align: left;
   }
   
   .dataTables_scroll{
      border:1px solid silver;
      border-radius:5px;
   }
   .icon-btn{
      height: 30px;
   }
</style>
<section class="container-fluid p-3 py-2 " style="padding-bottom:300px;">
   <div class="card container-shadow py-3 mb-2">
      <div class="container-fluid">
         <div class="flex position-relative">
               <span class="fw-semibold fs-4 align-middle justify-content-start text-secondary" style="font-weight: 500; font-size: 1.5em;">{{ ucwords($title) }}</span>
         </div>
      </div>
   </div>

   <div class="container-shadow bg-white ps-3 py-2 border mb-4 rounded" id="breadcrumb-container">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item active py-1" aria-current="page">Purchase Request</li>
                <li class="breadcrumb-item active py-1" aria-current="page">{{ ucwords($title) }}</li>
            </ol>
        </nav>
   </div>


   <div class="container-shadow border px-2 py-3 mb-3 rounded">
      <table class="table" id="pr_table" width="100%" style="max-width: 100%;">
         <thead >
            <tr>
               <th scope="col">NO.</th>
               <th scope="col" >PR NUMBER</th>
               <th scope="col" >CREATED AT</th>
               <th scope="col">REQUESTED BY</th>
               <th scope="col">SBU</th>
               <th scope="col" width="5%">DEPARTMENT </th>
               <th scope="col">REQUEST STATUS</th>
               <th scope="col">ACTION</th>
            </tr>
         </thead>
         <tbody>
            @foreach ( $items as $key=>$it )
            <tr>
               <td>{{ $key + 1 }}</td>
               <td>{{ $it->pr_no }}</td>
               <td>{{date('F d, Y', strtotime($it->date_created) ) }}</td>
               <td>{{ ucwords($it->user->name) }}</td>
               <td>
                  @php 
                  $sbu = \App\Models\TblSbu::find($it->user->tbl_sbu_id);
                  $userLevel = \App\Models\User::where('id', $it->status->user_id)->first();
                  if($it->user->tbl_sbu_id != 0){         
                  $sbuName = $sbu->sbu;
                  echo ucwords($sbuName);
                  }else{
                  echo 'Super Admin';
                  }
                  @endphp
               </td>
               <td>{{ strtoupper($it->user->department) }}</td>
               @if($it->status->status_code == 'under approval' || $it->status->status_code == 'verified')
               <td class="camelCase">{{ $it->status->status_code }} - for approval of <br> {{ $it->status->approver }} |
                  @php
                  // $department = App\Models\User::where('name', $it->status->approver)->first();
                  $department = App\Models\User::where('id', $it->status->approver_id)->first();
                  echo $department->department. ' Department';
                  @endphp
                  <br> {{date('d-M-Y', strtotime($it->status->updated_at))}} 
               </td>
               @elseif($it->status->status_code == 'approved')
               <td class="camelCase">{{ $it->status->status_code }} - by <br>  {{ $it->status->approveby }} |
                  @php
                  // $department = App\Models\User::where('name', $it->status->approveby)->first();
                  $department = App\Models\User::where('id', $it->status->approve_by)->first();
                  echo $department->department. ' Department';
                  @endphp
                  <br> {{date('d-M-Y', strtotime($it->status->updated_at))}}
               </td>
               @elseif($it->status->status_code == 'rejected' && $it->user_id != $it->status->user_id) 
               <td class="camelCase">{{ $it->status->status_code }} - by <br> {{ $it->status->approveby }} |
                  @php
                  // $department = App\Models\User::where('name', $it->status->approveby)->first();
                  $department = App\Models\User::where('id', $it->status->rejected_by)->first();
                  echo $department->department. ' Department';
                  @endphp
                  <br> {{date('d-M-Y', strtotime($it->status->updated_at))}}
               </td>
               @elseif($it->status->status_code == 'rejected' && $it->user_id == $it->status->user_id)
               <td class="camelCase">Cancelled - by <br> Requester <br> {{date('d-M-Y', strtotime($it->status->updated_at))}}</td>
               @elseif($it->status->status_code == 'under verification')
               <td class="camelCase">{{ $it->status->status_code }} - by <br> {{ $it->status->verifier }} |
                  @php
                  // $department = App\Models\User::where('name', $it->status->verifier)->first();
                  $department = App\Models\User::where('id', $it->status->verifier_id)->first();
                  echo $department->department. ' Department';
                  @endphp
               </td>
               @else
               <td class="camelCase">{{ $it->status->status_code }} - submitted by <br> {{ $it->user->name }} </td>
               @endif
               <td class="text-right">
                  <button class="btn btn-primary icon-btn" onclick="openNewWindow({{ $it->id }})">
                     <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="View Request" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;">
                        <path d="M14 12c-1.095 0-2-.905-2-2 0-.354.103-.683.268-.973C12.178 9.02 12.092 9 12 9a3.02 3.02 0 0 0-3 3c0 1.642 1.358 3 3 3 1.641 0 3-1.358 3-3 0-.092-.02-.178-.027-.268-.29.165-.619.268-.973.268z"></path>
                        <path d="M12 5c-7.633 0-9.927 6.617-9.948 6.684L1.946 12l.105.316C2.073 12.383 4.367 19 12 19s9.927-6.617 9.948-6.684l.106-.316-.105-.316C21.927 11.617 19.633 5 12 5zm0 12c-5.351 0-7.424-3.846-7.926-5C4.578 10.842 6.652 7 12 7c5.351 0 7.424 3.846 7.926 5-.504 1.158-2.578 5-7.926 5z"></path>
                     </svg>
                  </button>
               
                  <button class="btn btn-warning icon-btn" onclick="openimage({{ $it->id }})">
                     <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="View Attachment" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="M17.004 5H9c-1.838 0-3.586.737-4.924 2.076C2.737 8.415 2 10.163 2 12c0 1.838.737 3.586 2.076 4.924C5.414 18.263 7.162 19 9 19h8v-2H9c-1.303 0-2.55-.529-3.51-1.49C4.529 14.55 4 13.303 4 12c0-1.302.529-2.549 1.49-3.51C6.45 7.529 7.697 7 9 7h8V6l.001 1h.003c.79 0 1.539.314 2.109.886.571.571.886 1.322.887 2.116a2.966 2.966 0 0 1-.884 2.11A2.988 2.988 0 0 1 17 13H9a.99.99 0 0 1-.698-.3A.991.991 0 0 1 8 12c0-.252.11-.507.301-.698A.987.987 0 0 1 9 11h8V9H9c-.79 0-1.541.315-2.114.889C6.314 10.461 6 11.211 6 12s.314 1.54.888 2.114A2.974 2.974 0 0 0 9 15h8.001a4.97 4.97 0 0 0 3.528-1.473 4.967 4.967 0 0 0-.001-7.055A4.95 4.95 0 0 0 17.004 5z"></path></svg>              
                  </button>
                  <!-- if($it->detail->req_image != 'NA')
                     <button class="btn btn-warning" title="View Attachments"  onclick="openimage({ $it->id }})">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><circle cx="7.499" cy="9.5" r="1.5"></circle><path d="m10.499 14-1.5-2-3 4h12l-4.5-6z"></path><path d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-16 14V6h16l.002 12H3.999z"></path></svg>        
                     </button> endif -->
                  @if($it->status->status_code != 'approved' ||  $it->status->user->position != 'chief executive officer' &&  $it->status->user->position != 'super admin')
                  @if($it->status->status_code != 'rejected' || $it->status->user->position != 'chief executive officer' &&  $it->status->user->position != 'super admin')
                  @if($it->status->user_id != 7 && $it->status->status_code != 'cancelled')
                  <a href="/edit/{{ $it->id }}">
                     <button class="btn btn-info icon-btn" >
                        <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Edit Request" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;">
                           <path d="m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z"></path>
                           <path d="M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z"></path>
                        </svg>
                     </button>
                  </a>
               
                  @if($it->status->status_code != 'verified' && $it->status->status_code != 'approved' && $it->status->status_code != 'rejected')
                  <button type="button" class="btn btn-success icon-btn" data-bs-toggle="modal" data-bs-target="#verifyModal{{ $it->id }}">
                     <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Verify Request" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="M20.29 8.29 16 12.58l-1.3-1.29-1.41 1.42 2.7 2.7 5.72-5.7zM4 8a3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4 3.91 3.91 0 0 0-4 4zm6 0a1.91 1.91 0 0 1-2 2 1.91 1.91 0 0 1-2-2 1.91 1.91 0 0 1 2-2 1.91 1.91 0 0 1 2 2zM4 18a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3v1h2v-1a5 5 0 0 0-5-5H7a5 5 0 0 0-5 5v1h2z"></path></svg>
                  </button>
                  @endif
                  @if( $it->status->status_code != 'approved')
                  <button type="button" class="btn btn-success icon-btn"  data-bs-toggle="modal" data-bs-target="#approveModal{{ $it->id }}">
                     <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Approve Request" width="24" height="24" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;">
                        <path d="M20 8h-5.612l1.123-3.367c.202-.608.1-1.282-.275-1.802S14.253 2 13.612 2H12c-.297 0-.578.132-.769.36L6.531 8H4c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h13.307a2.01 2.01 0 0 0 1.873-1.298l2.757-7.351A1 1 0 0 0 22 12v-2c0-1.103-.897-2-2-2zM4 10h2v9H4v-9zm16 1.819L17.307 19H8V9.362L12.468 4h1.146l-1.562 4.683A.998.998 0 0 0 13 10h7v1.819z"></path>
                     </svg>
                  </button>
                  @endif
                  @if($it->status->status_code != 'rejected')
                  <button type="button" title="Reject Request" class="btn btn-danger icon-btn"  data-bs-toggle="modal" data-bs-target="#rejectModal{{ $it->id }}">
                     <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Reject Request" width="24" height="24" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm4.207 12.793-1.414 1.414L12 13.414l-2.793 2.793-1.414-1.414L10.586 12 7.793 9.207l1.414-1.414L12 10.586l2.793-2.793 1.414 1.414L13.414 12l2.793 2.793z"></path></svg>
                  </button>
                  @endif
                  @endif
                  @endif @endif
                  @include('inc.modal.verifyModal') 
               </td>
            </tr>
            @endforeach
         </tbody >
      </table>
   </div>
</section>
<!-- div container 
   -->
<script>
   function openNewWindow(id) {
       window.open('/pdfviewReport/' + id);
   }

   // function openimage(id) {
   //     window.open('/pdfviewAttachment/' + id);
   // }

   function openimage(id) {
       window.open('/attachment-route/' + id); //attachment-route
   }
   function openAsPdf(id) {
       window.open('/imageview/' + id);
   }
   
   $(document).ready(function() {
       $('#pr_table').DataTable({
         "scrollY": "550px",
         "scrollX": "1200px",
        dom: '<"filter row"<"col-12"<l"row"f<"col-12"tr>>><"row"<"col-12"ip>>><"clear">',
   
         initComplete: function() {
           var table = this;
           var filter = $('.filter');
   
           filter.prepend('<div class="form-group col-md-3 m-0"></div>');
           filter.find('.form-group').append('<div id="select-group"></div>');
           filter.prepend('<div class="form-group text-end col-md-6" style="margin: 0px"><div class="form-floating mb-3"><select style="width: 100%" class="form-select" id="statusSelect" aria-label="Floating label select example"><option value="">All</option><option value="pending">Pending</option><option value="under verification">For Verification</option><option value="verified">Verified</option><option value="approved">Approved</option><option value="Rejected">Rejected</option><option value="cancelled">Cancelled</option></select><label for="statusSelect">Filter By Status</label></div>');
           filter.prepend('<div class="form-group text-end col-md-6" style="margin: 0px"><div class="form-floating mb-3"><select style="width: 100%" class="form-select" id="sbuSelect" aria-label="Floating label select example"><option value="">All</option>@foreach($sbuList as $sb)<option value="{{$sb->sbu}}">{{ucwords($sb->sbu)}}</option>@endforeach</select><label for="statusSelect">Filter By SBU</label></div>');
           filter.find('#statusSelect').on('change', function() {
             var selectedValue = $(this).val();
             table.api().column(6).search(selectedValue).draw();
           });
           filter.find('#sbuSelect').on('change', function() {
             var selectedValue = $(this).val();
             table.api().column(4).search(selectedValue).draw();
           });
           $('#searchInput').on('keyup', function() {
             table.api().search(this.value).draw();
           });
         }
       });
       $('#statusSelect').select2({
         
       });
       $('#sbuSelect').select2({
         
           
       });
     });

</script>
<script>
   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
   var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new bootstrap.Tooltip(tooltipTriggerEl)
   })

 
</script>

@include('inc.modal.modalloader')
@include('inc.footer-inc')