@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('save_edit_change') }}" enctype="multipart/form-data" id="vat_edit_chng_app_form">
            {{ csrf_field() }}
            <input type="hidden" class="form-control" value="{{ $buyer_name }}" name="buyername">
            <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">
            <input type="hidden" class="form-control" value="{{ $id }}" name="id">
            <input type="hidden" class="form-control" value="{{ $buyer_id }}" name="buyer_id">

            <div class="form-group">
                <label for="agreement">Sales agreement/ Invoice</label>
                <input type="file" id="agreement" name="agreement" accept=".pdf,.jpeg,.png,.jpg" class="form-control">
                <!--<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>
                <input type="file"  name="blueCard" id="blueCard" accept=".pdf,.jpeg,.png,.jpg" class="form-control">
                @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>
              <input type="file" name="sellerID" id="sellerID" accept=".pdf,.jpeg,.png,.jpg" class="form-control" data-toggle="tooltip" data-placement="top" title="Traders Licence or TCC may be attached for Companies only">
              @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>
              <input type="file" name="buyerID" id="buyerID" accept=".pdf,.jpeg,.png,.jpg" class="form-control" data-toggle="tooltip" data-placement="top" title="Traders Licence or TCC may be attached for Companies only">
              @if ($errors->has('buyerID'))
                <div class="error-message">   
                   {{ $errors->first('buyerID') }}
                </div>  
              @endif
            </div>            
            {{-- <div class="form-group">
              <label for="VAT">VAT 11</label>
              <input type="file" name="VAT" id="VAT" accept=".pdf,.jpeg,.png,.jpg" class="form-control file-upload-info"  placeholder="VAT 11">
                @if ($errors->has('VAT'))
                    <div class="error-message">
                        {{ $errors->first('VAT') }}
                    </div>
                @endif
            </div> --}}

            <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>

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

  <script type="text/javascript">
    $(document).ready(function(){

        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
        
      $('#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_edit_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>
@endsection