@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;
  } */
  #radiobtn{
    background-color:var(--body-color) !important; 
    color:var(--text-color) !important;
    border: 1px solid var(--text-color);
  }

  #searchInput{
    padding: 8px !important;
  }
  .dataTables_length{
    margin-top: 10px;
  }
  .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;
    background: var(--body-color);
}
.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="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">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' || $it->status->status_code == 'Rejected')
        <td class="camelCase">{{ $it->status->status_code }} - by {{ $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 {{ $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 Requester <br> {{date('d-M-Y', strtotime($it->status->updated_at))}}</td>
        @elseif($it->status->status_code == 'cancelled')
        <td class="camelCase">{{ $it->status->status_code }} - by 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 {{ $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->status->status_code != 'approved' && $it->status->status_code != 'rejected' && auth()->user()->name == $it->status->approver)
        @if($it->status->status_code != 'verified' && $it->status->status_code != 'under approval')
        
        <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="View Attachment" 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>@endif
      
        <!-- verify btn
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#verifyModal //{ $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:;"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
        </button>
        -->
        <button type="button" title="Verify Request" 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="22" height="22" 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>

      @if($it->status->status_code != 'approved')
      
        <button type="button" 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="View Attachment" width="22" height="22" 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
        @include('inc.modal.verifyModal')
      </td>  
    
        </tr>
        @endforeach
      </tbody >
    </table>
  </div>
</section>


<script>
$(document).ready(function() {
    $('#pr_table').DataTable({
      "scrollY": "450px",
      "scrollX": "1200px",
     dom: '<"filter row"<"col-12"<"row"<"col-12"tr>>><"row"<"col-12"lip>>><"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.find('#select-group').append('<div class="form-floating mb-3"><input type="text" class="form-control" id="searchInput" placeholder="example"><label for="statusSelect">Type to Search</label></div>');
        filter.prepend('<div class="form-group text-end col-md-9" style="margin: 0px"><div class="form-floating mb-3"><select class="form-select" style="width: 100%" 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.find('#statusSelect').on('change', function() {
          var selectedValue = $(this).val();
          table.api().column(6).search(selectedValue).draw();
        });
        $('#searchInput').on('keyup', function() {
          table.api().search(this.value).draw();
        });
      }
    });
    $('#statusSelect').select2({
        
    });
  });
  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);
   }

// $("body").on('click', 'button[id=reject-btn]', function(){

// if($('#floatingInput-reject').val().trim() === ''){
//   alert('Please fill out this field.');
//   return false;
// }

// });
  </script>

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