@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);
  }
  .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;
  }
  /* 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);
  }
  .dataTables_filter, .dataTables_length{
    margin: 10px;
  }

  #searchInput{
    padding: 8px !important;
    
  }
  .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="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">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>{{ 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 {{ $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 Requestor <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->status->status_code != 'approved' && $it->status->status_code != 'rejected' && $it->status->status_code != 'under approval' && $it->status->status_code != 'verified' && $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')
            <button type="button" title="Verify Request" 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 != 'verified' && auth()->user()->position != 'supervisor')
            <button type="button" title="Approve 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>
            @endif

            @if( $it->status->status_code != 'rejected' && $it->status->status_code != 'approved' && $it->user_id != auth()->user()->id && $it->user->department_id != auth()->user()->department_id)
            <button type="button" title="Return Request"class="btn btn-warning icon-btn" data-bs-toggle="modal" data-bs-target="#returnModal{{ $it->id }}">
              <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Return Request" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="M9 10h6c1.654 0 3 1.346 3 3s-1.346 3-3 3h-3v2h3c2.757 0 5-2.243 5-5s-2.243-5-5-5H9V5L4 9l5 4v-3z"></path></svg>        
            </button>@endif

            @if($it->status->status_code != 'verified')
            <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="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>

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": "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="name@example.com"><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 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.find('#statusSelect').on('change', function() {
          var selectedValue = $(this).val();
          table.api().column(5).search(selectedValue).draw();
        });
        $('#searchInput').on('keyup', function() {
          table.api().search(this.value).draw();
        });
      }
    });
    $('#statusSelect').select2({
      placeholder: 'Select Status',
});    
  });


  </script>

  @include('inc.modal.modalloader')

  
  @include('inc.footer-inc')

  {{-- ayan --}}