@extends('layouts.vat')

@section('content')

	@if (session('status'))
      <div class="alert alert-success">
          {{ session('status') }}
      </div>
  @endif  
  @if (session('info'))
      <div class="alert alert-info">
          {{ session('info') }}
      </div>
  @endif
  @if (session('warning'))
      <div class="alert alert-warning">
          {{ session('warning') }}
      </div>
  @endif
  <div class="content-wrapper">
	    <div class="card">
        <div class="card-body">
          <h4 class="cards-title">Upload Relevant Attachments(PDF/Image) - 2MB Maximum files size</h4>
          <form class="forms-sample" method="POST" action="{{ route('store_vat') }}" enctype="multipart/form-data" id="vat_chng_app_form">
            {{ csrf_field() }}
            <input type="hidden" class="form-control" value="{{ $buyer_name }}" name="buyername">
            <input type="hidden" class="form-control" value="{{ $buyer_id }}" name="buyer_id">
            <input type="hidden" class="form-control" value="{{ $address }}" name="address">
            <input type="hidden" class="form-control" value="{{ $district }}" name="district">
            <input type="hidden" class="form-control" value="{{ $buyer_mobile_number }}" name="buyermobile">
            <input type="hidden" class="form-control" value="{{ $buyer_email }}" name="buyeremail">
            <input type="hidden" class="form-control" value="{{ $buyer_tin }}" name="tin">
            <input type="hidden" class="form-control" value="{{ $purchase_date }}" name="purchasedate">
            <input type="hidden" class="form-control" value="{{ $purchase_price }}" name="purchaseprice">
            <input type="hidden" class="form-control" value="{{ $vat_paid }}" name="vatpaid">
            <input type="hidden" class="form-control" value="{{ $vat_number }}" name="serial">
            <input type="hidden" class="form-control" value="{{ $service_center }}" name="center">

            <div class="form-group">
                <label for="agreement">Sales agreement/ Invoice</label><span class="required">*</span>
                <input type="file" id="agreement" name="agreement" class="form-control" accept=".pdf,.jpeg,.png,.jpg" required>
                <!--<span class="input-group-append">
                  <button class="file-upload-browse btn btn-danger" type="button">Attach</button>
                </span>-->
                  @if ($errors->has('agreement'))
                    <div class="error-message">   
                       {{ $errors->first('agreement') }}
                    </div>  
                  @endif
            </div>
            <div class="form-group">
                <label for="blueCard">Certificate of Registration/ Blue Card/ Deregistration Certificate/ Export Certificate</label><span class="required">*</span>
                <input type="file"  name="blueCard" id="blueCard" class="form-control" accept=".pdf,.jpeg,.png,.jpg" required>
                @if ($errors->has('blueCard'))
                  <div class="error-message">   
                     {{ $errors->first('blueCard') }}
                  </div>  
                @endif
            </div>
            <div class="form-group">
              <label for="sellerID">Seller ID/Certificate of Incorporation/Traders Licence/TCC</label><span class="required">*</span>
              <input type="file" name="sellerID" id="sellerID" class="form-control" accept=".pdf,.jpeg,.png,.jpg" data-toggle="tooltip" data-placement="top" title="Traders Licence or TCC may be attached for Companies only" required>
              @if ($errors->has('sellerID'))
                <div class="error-message">   
                   {{ $errors->first('sellerID') }}
                </div>  
              @endif
            </div>
            <div class="form-group">
               <label for="buyerID">Buyer ID/Certificate of Incorporation/Traders Licence/TCC</label><span class="required">*</span>
              <input type="file" name="buyerID" id="buyerID" class="form-control" accept=".pdf,.jpeg,.png,.jpg" data-toggle="tooltip" data-placement="top" title="Traders Licence or TCC may be attached for Companies only" required>
              @if ($errors->has('buyerID'))
                <div class="error-message">   
                   {{ $errors->first('buyerID') }}
                </div>  
              @endif
            </div>            
            {{-- <div class="form-group">
              <label for="VAT">VAT 11</label><span class="required">*</span>
              <input type="file" name="VAT" id="VAT" class="form-control file-upload-info"  placeholder="VAT 11" accept=".pdf,.jpeg,.png,.jpg" required>
                @if ($errors->has('VAT'))
                    <div class="error-message">
                        {{ $errors->first('VAT') }}
                    </div>
                @endif
            </div> --}}

            {{-- SPRINT 2 NEW CHANGES - ADD EXTRA ATTACHMENTS --}}
            <div class="form-group">
              <label for="extraFileInputsContainer">Extra File Attachments</label>
              <div id="extraFileInputsContainer">
                  <button type="button" class="btn btn-info btn-sm col-md-auto" style="background: #ff5100; border-color: #fff; height: 34px; font-weight: bold" id="addBtn"><span class="mdi mdi-plus"></span> Add more attachments</button>
                  <div id="extra-attachments-container">
                      <div id="extra-attachments">
                      </div>
                  </div>
              </div>
            </div>
            {{-- SPRINT 2 END NEW CHANGES --}}

            <button type="submit" class="btn btn-info btn-sm" style="background: #ff5100; border-color: #fff;">Apply</button>
            <a href="{{ url('/changeapps') }}" class="btn btn-secondary right btn-sm">Close
                 </a>
          </form>
        </div>
      </div>
	</div>

{{-- SPRINT 2 NEW CHANGES - HANDLE ADDING MORE ATTACHMENTS DYNAMICALLY --}}
<script type="text/javascript">
  $(document).ready(function(){

      $(function () {
          $('[data-toggle="tooltip"]').tooltip();
      });

    //form-inline
      
    // $('#extra-attachments-error-message-div').hide();
      // <input type="text" class="form-control mb-2 col-md-4 mt-2" name="fileName[]" id="file-name" data-toggle="tooltip" data-placement="top" title="Enter the file name" placeholder="Enter the file name" required>
    $('#addBtn').on('click', function(){
        $('#extra-attachments').append(
            `
            <div id="extra-attachments-wrapper">
                <div class="form-inline">
                    <select class="custom-select custom-select-md mt-2" name="fileName[]" id="file-name" data-toggle="tooltip" data-placement="top" title="Select the file name" required style="width: auto; height: 45px">
                        <option value="">Select the file name</option>
                        <option value="Beneficiary Nomination">Beneficiary Nomination</option>
                        <option value="Marriage Certificate">Marriage Certificate</option>
                        <option value="Valuation eMail">Valuation eMail</option>
                        <option value="Proof of Payment">Proof of Payment</option>
                        <option value="" id="other_option">Other</option>
                    </select>
                    <input type="file" class="form-control form-control-file col-md-auto mt-2" name="extraFile[]" style="height: 45px" id="file" data-toggle="tooltip" data-placement="top" title="Select the file" required>
                    <button type="button" class="btn btn-danger btn-sm col-md-auto mt-2" style="height: 45px; font-weight: bold" id="removeBtn" data-toggle="tooltip" data-placement="top" title="Remove this attachment"><span class="mdi mdi-minus"></span> Remove</button>
                </div>
                <div class="error-message mt-1" id="extra-attachments-error-message-div">
                    <strong id="extra-attachments-error-message"></strong>
                </div>
            </div>

            `
        );

          if ($('#extra-attachments').children('#extra-attachments-wrapper').length > 0) {
            for (let child = 0; child < $('#extra-attachments').children('#extra-attachments-wrapper').length; child ++){
                const children_array = Array.from($('#extra-attachments').children('#extra-attachments-wrapper').children(".form-inline")[child].children);
                for(let sub_child = 0; sub_child < children_array.length; sub_child ++){

                    if(children_array[sub_child].id == "removeBtn"){
                        children_array[sub_child].onclick = function(){
                            this.parentNode.parentNode.remove();
                        }
                    }
                }
            }

            
          }

          // Listen for selection of "Other" option
          const other_option = Array.from(document.querySelectorAll('#file-name'));            
          for(i = 0; i < other_option.length; i++){
              other_option[i].addEventListener("change", function(e){
                  // Get the selected option
                  const selectedOption = this.options[e.target.selectedIndex];
                  // Check if the selected option has a particular ID
                  if (selectedOption.id === 'other_option') {
                      //alert("Option with ID 'other_option' selected!");
                      Swal.fire({
                          title: "Enter the File name",
                          input: "text",
                          inputPlaceholder: "File name",
                          showClass: {
                              popup: `
                              animate__animated
                              animate__fadeInUp
                              animate__faster
                              `
                          },
                          hideClass: {
                              popup: `
                              animate__animated
                              animate__fadeOutDown
                              animate__faster
                              `
                          },
                          confirmButtonColor: "#FF5100",
                          showCloseButton: true,
                          allowOutsideClick: false,
                          inputAutoTrim: true,
                          inputValidator: (value) => {

                              // Sanitize input to prevent XSS
                              const sanitizedValue = DOMPurify.sanitize(value); // Using DOMPurify for sanitization
                              if (sanitizedValue !== value) {
                                  return 'Invalid characters detected!';
                              }

                              if (!value) {
                                  return "File name cannot be blank";
                              }

                              const invalidChars = /[^a-zA-Z0-9_ ]/;
                              if(invalidChars.test(value)){
                                  return 'File name can only contain letters, numbers, underscores, and spaces';
                              }

                              if(value.length > 20){
                                  return 'File name can not be more than 20 characters';
                              }
                          }
                      }).then((result) => {
                          if (result.isConfirmed) {

                              addOptionAndSelectIt(result.value, e.target);

                              removeOtherOption(e.target);

                              addOtherOption("Other", e.target);
                          }
                      });

                      function removeOtherOption(target) {

                          const selectItem = target;

                          var options = selectItem.options;

                          for(i = 0; i < options.length; i ++){
                              if(options[i].id === "other_option"){
                                  const optionToRemove = selectItem.options[i];
                                  optionToRemove.remove();
                              }
                          }
                      }

                      function addOptionAndSelectIt(new_option, target) {
                          // Create a new option element
                          const selectItem = target;
                          const newOption = document.createElement("option");

                          // Check if the option already exists
                          const isDuplicate = Array.from(selectItem.options).some(
                              option => option.text.toLowerCase() === new_option.toLowerCase()
                          );

                          // Check if the option already exists
                          if(!isDuplicate){
                              // Set the value and text of the option
                              newOption.value = new_option;
                              newOption.text = new_option;

                              // Add the new option to the select element
                              selectItem.add(newOption);

                              // Select the newly added option
                              newOption.selected = true;
                          }
                      }

                      function addOtherOption(option, target) {
                          // Create a new option element
                          const selectItem = target;
                          const newOption = document.createElement("option");

                          // Set the value and text of the option
                          newOption.value = option;
                          newOption.text = option;
                          newOption.id = "other_option";

                          // Add the new option to the select element
                          selectItem.add(newOption);
                      }
                  }
              })
          }
    });

    

      

    $('#vat_chng_app_form').submit(function(e) {
        // Prevent the form from submitting
        e.preventDefault();
        console.log($('#extra-attachments').children('#extra-attachments-wrapper').length);
        

        if ($('#extra-attachments').children('#extra-attachments-wrapper').length > 0) {
            for (let child = 0; child < $('#extra-attachments').children('#extra-attachments-wrapper').length; child ++){
                const children_array = Array.from($('#extra-attachments').children('#extra-attachments-wrapper').children(".form-inline")[child].children);
                const error_message = $('#extra-attachments').children('#extra-attachments-wrapper').children(".error-message")[child].children;

                error_message[0].textContent ="";
                error_message[0].style.display = 'none';

                let fileNameFieldValid = false;
                let fileFieldValid = false;

                for(let sub_child = 0; sub_child < children_array.length; sub_child ++){
                    children_array[sub_child].classList.remove("is-invalid");
                    if(children_array[sub_child].id === 'file-name'){

                        if(children_array[sub_child].value.length === 0){
                            fileNameFieldValid = false;
                        }
                        else{
                            fileNameFieldValid = true;
                        }

                    }

                    if(children_array[sub_child].id === 'file'){

                        if(children_array[sub_child].files.length == 0){
                            fileFieldValid = false;
                        }
                        else{
                            fileFieldValid = true;
                        }

                    }

                    // Make the field invalid if is blank
                    if(!fileNameFieldValid && children_array[sub_child].id == 'file-name'){
                        children_array[sub_child].classList.add("is-invalid");
                    }

                    if(!fileFieldValid && children_array[sub_child].id == 'file'){
                        children_array[sub_child].classList.add("is-invalid");
                    }

                    // Remove error warning and message when focused
                    children_array[sub_child].onfocus = function(){
                        children_array[sub_child].classList.remove("is-invalid");
                        error_message[0].textContent ="";
                        error_message[0].style.display = 'none';
                    };

                    console.log(children_array[sub_child]);

                    if(children_array[sub_child].id == "removeBtn"){
                        children_array[sub_child].onclick = function(){
                            this.parentNode.parentNode.remove();
                        }
                    }
                }

                if(!fileNameFieldValid || !fileFieldValid){
                    error_message[0].textContent ="Please enter the File name and select the file";
                    error_message[0].style.display = 'block';
                }
                else{
                    error_message[0].textContent ="";
                    error_message[0].style.display = 'none';

                    this.submit();
                }
            }
        }
        else{
          this.submit();
        }

    });
  });
</script>
{{-- SPRINT 2 END NEW CHANGES --}}
@endsection