@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{
      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;
   }
   #radiobtn{
      background-color:var(--body-color) !important; 
      color:var(--text-color) !important;
      border: 1px solid var(--text-color);
   }
   .dataTables_filter, .dataTables_length{
      margin: 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;
   }
   .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 )
      @php
      $status_code = \App\Models\TblStatusCode::find( $it->status->tbl_status_codes_id);
      @endphp
         <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 {{ $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
            </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->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 == '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->rejected_by)->first();
               echo $department->department. ' Department';
               @endphp
               <br> {{date('d-M-Y', strtotime($it->status->updated_at))}}
            </td>
            @else
            <td class="camelCase">{{ $it->status->status_code }} - submitted by {{ $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="Verify 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 != 'verified' && $it->status->status_code != 'approved' && $it->status->status_code != 'rejected' && $it->status->status_code != 'under approval'  && $it->status->status_code != 'under verification' && $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>
               <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="Cancel 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
            </td>
            {{-- @include('inc.modal.cancelModal') --}}
            @include('inc.modal.verifyModal')
            @endforeach
         </tr>
      </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" ><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(5).search(selectedValue).draw();
           });
           $('#searchInput').on('keyup', function() {
             table.api().search(this.value).draw();
           });
         }
       });
       $('#statusSelect').select2({
           placeholder: 'Select Status',
           
       });
     });
   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);
   }

     
</script>

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