@include('inc.header-inc')

<script>
  setTimeout(function() {
    $('#alert-createform').fadeOut('slow');
  }, 5000); // 3000ms = 3 seconds
</script>
<style>
  .alert {
    transition: opacity 0.5s ease-in-out;
  }
  .center {
  text-align: center;
}

table th{
  color: white;
  font-size: 13px;
}

.table thead tr > th{
  background: var(--primary-color) !important;
  color:white !important;
}


body.dark table tr{
  color: var(--text-color);
  background: var(--body-color);
}

.requestform-box{
  background-color: var(--body-color) !important
}

input{
  background-color: var(--sidebar-color) !important;
  color: var(--text-color) !important;
}


/* NEW STYLE */
.select2-container--default .select2-selection--single{
    padding:12px 5px !important;
    height: 57px !important;
    width: 100% !important; 
    font-size: 16px !important;  
    position: relative !important;
    border:1px solid rgba(0,0,0,0.2) !important;
    background-color: var(--sidebar-color) !important;
    transition: var(--tran-03) !important;
}
body.dark .select2-container--default .select2-selection--single{
  border:1px solid var(--text-color) !important;
  transition: var(--tran-03) !important;
}
span.select2-selection__rendered{
    color: var(--text-color) !important;
    transition: var(--tran-03) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    font-size: 1.3em !important;
    padding: 25px 12px !important;
    height: 27px !important;
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    width: 20px !important;
    transition: var(--tran-03) !important;
}

.table thead th{
  background-color: var(--sidebar-color)  !important;
  color: var(--text-color) !important;
}

.btn-requestform{
  border: none;
}

#warn-label{
  color:var(--text-color) !important;
}
.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>

    <!-- ALERT CONTENT -->
    {{-- @if(!session('controlNo') || !session('new_window_url'))
      <div class="card p-2 mb-2 container-shadow" id="alert-createform">
        <div class="alert alert-primary alert-dismissible fade show m-0" role="alert">
          Click the Control Number <a href="/pdfviewReport/{{ session('controlId') }}" class="alert-link" target="_blank">{{ session('controlNo') }}</a>. Give it a click if you like.
          <button type="button" class="btn-close" onclick="$('#alert-createform').fadeOut('slow');" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <script>
          window.open('{{ session('new_window_url') }}', '_blank');
        </script>
      </div>  
    @endif --}}
    <div class="card p-2 mb-2 container-shadow d-none" id="alert-createform">
      
    </div>

    <!-- FORM CONTENT -->
    <div class="container-shadow border px-2 py-3 mb-3 rounded requestform-box">
      <div id="list-example" class="list-group">
        <form action="/submit" method="POST" enctype="multipart/form-data">
          @csrf
          <div class="row g-3">

            <!-- PARTICULAR -->
            <div class="col-md-6">
              <div class="form-floating">
                <select class="form-select" name="req_particulars" id="req_particulars" class="form-select" required style="width:100%">
                  <option value="">Select Request Items</option>
                  @foreach ($particular as $item )
                  @php
                  $pascalCaseName = str_replace(' ', '', ucwords(strtolower($item->name)));
                  @endphp
                  <option value="{{ $item->name }}">{{ $pascalCaseName }}</option>
                  @endforeach
                </select>
                <label for="inputParticulars" class="form-label"><span class="text-danger">*</span>Particular</label>
              </div>
            </div>


            <!-- DESCRIPTION -->
            <div class="col-md-6">
              <div class="form-floating">
                <input name="req_description" id="description" class="form-control" required placeholder="example">
                <label for="inputDescription" class="form-label"><span class="text-danger">*</span>Description</label>
              </div>
            </div>


            <!-- UNIT OF MEASUREMENT -->
            <div class="col-md-6">
              <div class="form-floating">
                <select name="uom" class="form-select" aria-label="Default select example" id="uom" required style="width:100%">
                  <option value="">Unit Of Measurement</option>
                  @foreach ($data as $u)
                  <option value="{{ $u->uom_abv }}">{{ ucwords(strtolower($u->uom)) }}</option>
                  @endforeach
                </select>
                <label for="inputUnit" class="form-label"><span class="text-danger">*</span>Unit of Measurement</label>
              </div>
            </div>


            <!-- QUANTITY -->
            <div class="col-md-6">
              <div class="form-floating">
                <input type="number" name="qty" class="form-control" min="1" oninput="this.value = Math.abs(this.value)" id="inputQuantity" required placeholder="example">
                <label for="inputQuantity" class="form-label"><span class="text-danger">*</span>Quantity</label>
              </div>
            </div>

            <!-- DATE NEEDED -->
            <div class="col-md-6">
              <div class="form-floating">
                <input type="date" name="date_needed" class="form-control" id="myDateField" required onkeypress="return false">
                <label for="inputDateneed" class="form-label"><span class="text-danger">*</span>Date Needed</label>
              </div>
            </div>


            <!-- REMARKS -->
            <div class="col-md-6"> 
              <div class="form-floating">
                <input type="text" name="req_remarks" class="form-control" id="inputRemarks" placeholder="example">
                <label for="inputRemarks" class="form-label">Remarks</label>
              </div>
            </div>
            

            <!-- ATTACHMENT -->
            <div class="col">
              <div class="form-floating">
                <input type="file" name="req_image" id="file-input" class="form-control" accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this)" placeholder="example">
                <div class="row" id="warn-label">
                  <label style="font-size: 10px">The Attachment must below 5MB</label>
                  <label style="font-size: 10px">Only Accept: JPEG, PNG AND PDF File</label>
                </div>
                <span id="file-error" style="color: red;"></span>
                <label for="inputRemarks" class="form-label">Attachment</label>
              </div>
            </div>
          </div>


          <!-- ADD REQUEST BUTTON -->
          <div class="text-center">
            <button type="submit" id="add-request" class="btn btn-primary btn-sm px-4 py-1 container-shadow mb-2">Add Request</button>
          </div>
        </form>
      </div>
    </div>

    <!-- TABLE CONTENT -->
    <div class="container-shadow border px-2 mb-3 py-2 rounded">
      <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
        <div class="text-start my-2">
          <button type="button" onclick="$('#tableform').submit()" data-bs-toggle="tooltip" class="btn btn-danger icon-btn" title="Remove Request">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 37" 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>
        </div>
        <div style="overflow:auto" class="border rounded shadow-sm">
          <table class="table">
            <thead>
                <tr>
                  <th>
                      <input type="checkbox" id="select-all-checkbox"  data-bs-toggle="tooltip" data-bs-placement="top" title="Select All">
                  </th>
                  <th>PARTICULAR</th>
                  <th>DESCRIPTION</th>  
                  <th>QUANTITY</th>
                  <th>UOM</th>
                  <th>DATE NEEDED</th>
                  <th>REMARKS</th>
                  <th>ATTACHMENT</th>
                </tr>
            </thead>
            @if(session('rows') && count(session('rows')) > 0)
            <tbody>
            @if(is_array(session('rows')))
              <form method="POST" action="/request/removeselectedrows" id="tableform">
              @csrf
                @foreach(session('rows') as $index=>$row)
                  <tr>
                    <td style="vertical-align: middle;">
                      <div class="form-check">
                        <input type="checkbox" name="selected[]" value="{{ $index }}">
                      </div>
                    </td>
                    <td style="vertical-align: middle;">{{ ucwords($row['req_particulars']) }} </td>
                    <td style="vertical-align: middle;">{{ ucwords(strtolower($row['req_description'])) }} </td>
                    <td style="vertical-align: middle;">{{ $row['qty'] }} </td>
                    <td style="vertical-align: middle;">{{ ucwords($row['uom']) }} </td>
                    <td style="vertical-align: middle;">{{ date('d-F-Y', strtotime($row['date_needed'] ))}} </td>
                    <td style="vertical-align: middle;">{{ ucwords($row['req_remarks']) }} </td>
                    <td class="center" style="vertical-align: middle;">
                      @if(!empty($row['req_image']))
                      @if (\Illuminate\Support\Str::contains($row['req_image'], ['.jpg', '.jpeg', '.png', '.gif']))
                      <img height="40" width="50" src="{{ asset('storage/'.$row['req_image']) }}" >
                      @else
                      <img height="40" width="40" src="{{ asset('particular_image/pdfimage.png') }}" >               
                      @endif
                      @else
                      <img height="40" width="50" src="{{ asset('storage/no-image.jpg') }}" >
                      @endif
                    </td>
                  </tr>
                  @if(session('rows') && !empty($row['req_image']))
                  <script>
                      const fileInput = document.getElementById('file-input');
                      // Set a timeout of 2 seconds
                      setTimeout(() => {
                        // Disable the file input element
                        fileInput.disabled = true;
                        document.getElementById('file-error').textContent = 'You can upload attachment once';
                      }, 100);
                  </script>
                  @endif    
                @endforeach
              </form>
            @endif
            </tbody>
          </table>
        </div>
        <div class="text-center">
          <button type="button" class="btn btn-primary btn-sm px-4 py-1 my-3" data-bs-toggle="modal" data-bs-target="#verifierModal">
            Submit Request
          </button></div>
        </div>
    </div>
</section>



<!-- Modal -->
@include('inc.modal.confirmationModal')
@else
<tbody>
  <tr>
      <td colspan="8" class="text-center">No items to show</td>
  </tr>
</tbody>
@endif


</div>
</div>
</div>

   @include('inc.footer-inc')
   @include('inc.modal.modalloader')
   <script>
    $(document).ready(function() {
      if(localStorage.getItem('resultSession')){
        $('#alert-createform').removeClass('d-none');
        // const result = localStorage.getItem('resultSession');
        const arr = localStorage.getItem('resultSession').split(",");
        $('#alert-createform').html(` 
        <div class="alert alert-primary alert-dismissible fade show" role="alert">
            Click the Control Number <a href="${arr[1]}" class="alert-link" target="_blank">${arr[0]}</a>. Give it a click if you like.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>`);
        localStorage.clear();
      }
      $('#req_particulars').select2({
          placeholder: 'Select Particular'
      });

      $('#uom').select2({
          placeholder: 'Select UOM'
      });

      $('#submit-form select').select2({
          dropdownParent: $('#verifierModal')
        });
    });
   </script>
   <script>



$('#file-input').on('change', function() {
  var numb = $(this)[0].files[0].size / 1024 / 1024;
  numb = numb.toFixed(2);
  if (numb > 2) {
    toasts_error("File Size Attached Over 5MB.");
    document.getElementById('file-input').value=''
  } 
});

var today = new Date().toISOString().split('T')[0];
    document.getElementById("myDateField").setAttribute("min", today);

$("body").on('click', 'button[id=add-request]', function(){
  isCorrect = 'true';
  // PARTICULAR 
  if($('#req_particulars').val().trim() === ''){
      toasts_error("Particular is required.");
      isCorrect = 'false';
      return false;
  }
  // DESCRIPTION
  if($('#description').val().trim() === ''){
      toasts_error("Description is required.");
      isCorrect = 'false';
      return false;
  }
  // UOM
  if($('#uom').val().trim() === ''){
      toasts_error("Unit Of Measurement is required.");
      isCorrect = 'false';
      return false;
  }
  // QUANTITY
  if($('#inputQuantity').val().trim() === ''){
      toasts_error("Quantity is required.");
      isCorrect = 'false';
      return false;
  }
  // QUANTITY
  if($('#inputQuantity').val() <= 0){
      toasts_error("Invalid Quantity.");
      isCorrect = 'false';
      return false;
  }
  // DATE NEEDED
  if($('#myDateField').val().trim() === ''){
      toasts_error("Date Needed is required.");
      isCorrect = 'false';
      return false;
  }
  // DATE NEEDED
  if($('#myDateField').val() < today){
      toasts_error("Invalid Date.");
      isCorrect = 'false';
      return false;
  }

  if(isCorrect == 'true'){
    setTimeout(() => {
      $('#add-request').prop('disabled', false);
      }, 1000);
  }


  var inputField = document.getElementById("description");
      var inputValue = inputField.value;

      var lowercaseValue = inputValue.toLowerCase();

      inputField.value = lowercaseValue;
     
});



  function validateFile(input) {
  const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png'];
  const file = input.files[0];
  
  if (file && !allowedTypes.includes(file.type)) {
    document.getElementById('file-error').textContent = "Invalid file type. Please select a JPEG, PNG OR PDF File.";
    input.value = ''; // reset the file input
  } else {
    document.getElementById('file-error').textContent = '';
  }
}

   </script>
   <script>
    const selectAllCheckbox = document.getElementById('select-all-checkbox');
    const checkboxes = document.querySelectorAll('input[name="selected[]"]');

    selectAllCheckbox.addEventListener('change', function() {
        checkboxes.forEach((checkbox) => {
            checkbox.checked = selectAllCheckbox.checked;
        });
    });
</script>

</body>
</html>