@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_modify') }}" enctype="multipart/form-data" id="vat_mod_app_form">
            {{ csrf_field() }}
             
            <input type="hidden" class="form-control" value="{{ $buyername }}" name="buyername">
            <input type="hidden" class="form-control" value="{{ $buyeraddress }}" name="buyeraddress">
            <input type="hidden" class="form-control" value="{{ $buyerdistrict }}" name="buyerdistrict">
            <input type="hidden" class="form-control" value="{{ $buyermobile }}" name="buyermobile">
            <input type="hidden" class="form-control" value="{{ $buyeremail }}" name="buyeremail">
            <input type="hidden" class="form-control" value="{{ $sellername }}" name="sellername">
            <input type="hidden" class="form-control" value="{{ $selleraddress }}" name="selleraddress">
            <input type="hidden" class="form-control" value="{{ $sellerdistrict }}" name="sellerdistrict">
            <input type="hidden" class="form-control" value="{{ $sellermobile }}" name="sellermobile">
            <input type="hidden" class="form-control" value="{{ $selleremail }}" name="selleremail">
            <input type="hidden" class="form-control" value="{{ $purchasedate }}" name="purchasedate">
            <input type="hidden" class="form-control" value="{{ $purchaseprice }}" name="purchaseprice">
            <input type="hidden" class="form-control" value="{{ $purchaseVAT }}" name="purchasevat">
            <input type="hidden" class="form-control" value="{{ $certificateID }}" name="certificateID">
            <input type="hidden" class="form-control" value="{{ $vehiclemake }}" name="vehiclemake">
            <input type="hidden" class="form-control" value="{{ $chassisnumber }}" name="chassisnumber" id="chassisnumber">
            <input type="hidden" class="form-control" value="{{ $enginenumber }}" name="enginenumber" id="enginenumber">
            <input type="hidden" class="form-control" value="{{ $servicecenter }}" name="center">
            <input type="hidden" class="form-control" value="{{ $buyerID }}" name="buyerID">
            <input type="hidden" class="form-control" value="{{ $sellerID }}" name="sellerID">
            @for($index; $index < $count; $index++)
            <input type="hidden" class="form-control" value="{{$fields[$index]}}" name="fields[]" >
            @endfor
            <div class="form-group" id="passportdiv">
                <label for="passport">Buyer Passport/ID#/Traders Licence/Constitution/TCC</label><span class="required">*</span>
                <input type="file" id="passport" name="passport" class="form-control" data-toggle="tooltip" data-placement="top" title="Traders Licence or TCC may be attached for Companies only">
                
                  @if ($errors->has('passport'))
                    <div class="error-message">   
                       {{ $errors->first('passport') }}
                    </div>  
                  @endif
            </div>
            <div class="form-group" id="sellerpassportdiv">
                <label for="sellerpassport">Seller Passport/ID#/Traders Licence/Constitution/TCC</label><span class="required">*</span>
                <input type="file" id="sellerpassport" name="sellerpassport" class="form-control" data-toggle="tooltip" data-placement="top" title="Traders Licence or TCC may be attached for Companies only">
                
                  @if ($errors->has('sellerpassport'))
                    <div class="error-message">   
                       {{ $errors->first('sellerpassport') }}
                    </div>  
                  @endif
            </div>
            <div class="form-group" id="invoicediv">
                <label for="invoice">Tax Invoice</label>
                <input type="file"  name="invoice" id="invoice" class="form-control">
                @if ($errors->has('invoice'))
                  <div class="error-message">   
                     {{ $errors->first('invoice') }}
                  </div>  
                @endif
            </div>           
            <div class="form-group" id="saddiv">
              <label for="sad">SAD</label>
              <input type="file" name="sad" id="sad" class="form-control file-upload-info"  placeholder="SAD">
                @if ($errors->has('sad'))
                    <div class="error-message">
                        {{ $errors->first('sad') }}
                    </div>
                @endif
            </div>
            <div class="form-group" id="bluecarddiv">
              <label for="bluecard">Receipt</label>
              <input type="file" name="bluecard" id="bluecard" class="form-control file-upload-info"  placeholder="Blue Card">
                @if ($errors->has('bluecard'))
                    <div class="error-message">
                        {{ $errors->first('bluecard') }}
                    </div>
                @endif
            </div>

            <div class="form-group" id="registrationdiv">
              <label for="registration">Certificate of Registration/Blue Card</label>
              <input type="file" name="registration" id="registration" class="form-control file-upload-info"  placeholder="Certificate of Registration">
                @if ($errors->has('registration'))
                    <div class="error-message">
                        {{ $errors->first('registration') }}
                    </div>
                @endif
            </div>

            <div class="form-group" id="vatdiv">
              <label for="vat">VAT11</label>
              <input type="file" name="vat" id="vat" 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 attachment</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;">Apply</button>
            <a href="{{ url('/vat_num') }}" class="btn btn-secondary right btn-sm">Close
                 </a>
          </form>
        </div>
      </div>
	</div>
  
  <script src="{{ asset('js/jquery.min.js') }}"></script>
  
  <script type="text/javascript">
      $(document).ready(function () {

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

         $('#passportdiv').hide();
         $('#sellerpassportdiv').hide();
         $('#invoicediv').hide();
         $('#saddiv').hide();
         $('#bluecarddiv').hide();
         $('#registrationdiv').hide();
         $('#vatdiv').hide();
         var fields = @json($fields);
         for (var i = 0; i < fields.length; i++) 
         {  
           if(fields[i] == "buyername" || fields[i] == "buyeraddress" || fields[i] == "buyerdistrict" || fields[i] == "buyermobile" || fields[i] == "buyeremail" || fields[i] == "buyerID")
           {
             $('#passportdiv').show();
             $('#passport').attr('required','').attr('accept','.pdf,.jpeg,.png,.jpg');
           }

          if(fields[i] == "sellername" || fields[i] == "selleraddress" || fields[i] == "sellerdistrict" || fields[i] == "sellermobile" || fields[i] == "selleremail" || fields[i] == "sellerID")
           {
             $('#sellerpassportdiv').show();
             $('#sellerpassport').attr('required','').attr('accept','.pdf,.jpeg,.png,.jpg');
           }

           if(fields[i] == "chassisnumber" || fields[i] == "enginenumber" || fields[i] == "vehiclemake")
           {
             $('#saddiv').show();
             $('#sad').attr('accept','.pdf,.jpeg,.png,.jpg');
             $('#passportdiv').show();
             $('#passport').attr('required','').attr('accept','.pdf,.jpeg,.png,.jpg');
             $('#sellerpassportdiv').show();
             $('#sellerpassport').attr('required','').attr('accept','.pdf,.jpeg,.png,.jpg');
             $('#invoicediv').show();
             $('#invoice').attr('accept','.pdf,.jpeg,.png,.jpg');
             $('#bluecarddiv').show();
             $('#bluecard').attr('accept','.pdf,.jpeg,.png,.jpg');
             $('#registrationdiv').show();
             $('#registration').attr('accept','.pdf,.jpeg,.png,.jpg');
             $('#vatdiv').show();
             $('#vat').attr('accept','.pdf,.jpeg,.png,.jpg');
           }

           if(fields[i] == "purchasevat" || fields[i] == "purchaseprice" || fields[i] == "purchasedate")
           {
             $('#invoicediv').show();
             $('#invoice').attr('required','').attr('accept','.pdf,.jpeg,.png,.jpg');
           }


         }



        $('#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>

                `
            );

            //The Remove button and its event
            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_mod_app_form').submit(function(e) {
            // Prevent the form from submitting
            e.preventDefault();

            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;

                    console.log(children_array);

                    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