@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);
    }
    .dataTables_filter{
        margin: 10px;
    }
    #searchInput{
        padding: 8px !important;
    }
    .dataTables_length{
        margin-top: 10px;
    }
    .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" cellspacing="0" role="grid" width="100%" style="width: 100%;">
        <thead >
            <tr role="row">
                <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>
                @php
                if(!empty($it->status->user_id)){
                $userLevel = \App\Models\User::where('id', $it->status->user_id)->first();
                $userlvl = $userLevel->user_level;
                }else{
                $userlvl = 1;
                }
                @endphp
                <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
                            <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')
                        <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 == '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 Attacgment" 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 != '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')
                    <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 != 'under verification' && $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="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')
                    <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="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>
    $(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 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();
            });
          }
        });
      });
    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.modal.modalloader')
@include('inc.footer-inc')