@include('affiliate.merchant_header')



                <div class="box-body wizard-content">



                    <form id="fileupload" action="{{ url('/affiliate/customer/user/app/index/' . $parent_id . '/' . $extensionId . '/' . $token_url) }}"  method=post  enctype="multipart/form-data" class="tab-wizard wizard-circle">

                        @csrf

                                                                
                           <div id="websiteUrlWrapper">        
                                <div class="form-row form-group row">
                                    <div class="col-4">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text @error('first_name') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                            <input type="" required="" name="document_name[]" placeholder="Document Title" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4" id="div_0">
                                        <div class="input-group mb-3">
                                            <select required class="form-select" name="document_type[]" onchange="myFunction('0')" id="type_0">
                                                    <option value="">Select Type</option>

                                                @if(!empty($document_types)) @foreach($document_types as $type)
                                                @if($type->status == 1)

                                            <option value="{{$type->type_title_url}}">{{ucfirst($type->title)}}</option>
                                            @endif
                                                    @endforeach @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-2" id="select_option_show_0" style="display: none;">
                                      <div class="input-group mb-3">
                                        <span class="input-group-text @error('first_name') text-danger border-danger @enderror"><i class="ti-list"></i></span>
                                        <select class="form-select" name="type_value[]" id="select_option_0">                                          
                                        </select>
                                      </div>         
                                    </div>
                                    <div class="col-4">                                      
                                      <div class="input-group">
                                        <input type="file" required="" name="file_name[]" onchange="return fileValidation(0)" id="input_file_0" class="form-control">
                                          <button class="btn btn-success btn-sm add"name="add" type="button"><i class="fa fa-plus" aria-hidden="true"></i></button> 
                                      </div>
                                      <span style="color:red;">File Supported : pdf | jpg | jpeg | png | gif</span>
                                         
                                    </div>
                                </div>
                            </div>                                    
                            <div class="box-footer text-end mb-3" style="padding: 0px;">                               
                               <a onclick="window.location.href='{{$_SERVER['REQUEST_URI']}}';" type="button" class="btn btn btn-warning waves-effect waves-light btn-md" data-dismiss="modal"><i class="fa fa-refresh" aria-hidden="true"></i> Cancel</a> 
                               <button type="submit" name="submit" value="add" class="btn btn btn-primary waves-effect waves-light btn-md"><i class="fa fa-check-square-o"></i> Submit</button>
                            </div>            
                            
                            
                    </form>
         <div style="width: 10%;" id="imagePreview"></div>
                               

                               
                </div>

          
            </div>
        </section>


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

            <!-- Vendor JS -->
    <script src="{{asset('assets/js/vendors.min.js')}}"></script>
    <script src="{{asset('assets/js/pages/chat-popup.js')}}"></script>
    <script src="{{asset('assets/icons/feather-icons/feather.min.js')}}"></script>  
    <script src="{{asset('assets/vendor_components/sweetalert/sweetalert.min.js')}}"></script>
    
    <!-- Joblly App -->
    <script src="{{asset('assets/js/template.js')}}"></script>
    
    <script src="{{asset('assets/js/pages/steps.js')}}"></script>
    
          
 

<!-- jQuery -->

  <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

<!-- change code for validation a file -->
        <script>
            function fileValidation(val)
            {
                document.getElementById('imagePreview').innerHTML = '';
                var fileInput = document.getElementById('input_file_'+val+'');

                let filesize = fileInput.files[0].size; 
                if (filesize > 5242880) {

                filesize = (filesize / 1048576).toFixed(2) + " MB";
                swal("Warning!", "Uploading File Size is "+filesize+".File Size should be less then or equal to 5 MB ", "warning")

                    //alert("Logo Image Size is exceeding 2 Mb");
                    $("#input_file_"+val+"").val('');
                    e.preventDefault();
                }


                var filePath = fileInput.value;

                // Allowing file type
                var allowedExtensions = /(\.pdf|\.jpg|\.jpeg|\.png|\.gif)$/i;

                if (!allowedExtensions.exec(filePath)) {
                    //alert('Invalid file type| file type should be pdf|jpg|jpeg|png');
                    swal("Warning!", "Uploading file tye extension is Invalid. File Type Extension should be pdf | jpg | jpeg | png | gif  ", "warning")

                    fileInput.value = '';
                    return false;
                } 
                else {
                        // Image preview
                        if (fileInput.files && fileInput.files[0]) {
                            var reader = new FileReader();
                            reader.onload = function(e) {
                            //document.getElementById('imagePreview').innerHTML = '<img src="' + e.target.result+ '"/>';
                        };
                        reader.readAsDataURL(fileInput.files[0]);
                    }
                }
            }

        </script>
  <script>
  $(document).ready(function ()
  {
    setTimeout(function() {
        $('.box-comment').fadeOut('fast');
    }, 3000);
    
    $('.phone_number').inputmask("(999) 999-9999");
    //$('#datatable').DataTable();
  });
</script>
        <script>
    j=1;
    function myFunction(val) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var selectedType = $('#type_' + val).val();

    // Check if the selected type is "Select Type"
    if (selectedType === '') {
        $("#select_option_show_" + val).hide();
        $('#div_' + val).removeClass("col-2");
        $('#div_' + val).addClass("col-4");
        return;
    }

    jQuery.ajax({
        url: "{{ url('/type-value-merchant/post') }}",
        method: 'post',
        data: {
            type: selectedType,
            client_id:{{$clientId}}
            
        },
        success: function (result) {
            var length = result.values.length;
            var option = '';

            // Check if there are values
            if (length > 0) {
                for (i = 0; i < length; i++) {
                    option += "<option value='" + result.values[i] + "'>" + result.values[i] + "</option>";
                }

                // If there are values, show the corresponding select
                $("#select_option_show_" + val).show();
                $("#select_option_" + val).html(option);
                $('#div_' + val).removeClass("col-4");
                $('#div_' + val).addClass("col-2");
            } else {
                // If no values, hide the entire div
                $("#select_option_show_" + val).hide();
                $('#div_' + val).removeClass("col-2");
                $('#div_' + val).addClass("col-4");
            }
        }
    });
}



        //  function myFunction(val)
        //  {
        //      $.ajaxSetup({
        //           headers: {
        //               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //           }
        //       });
        //        jQuery.ajax({
        //           url: "{{ url('/type-value/post') }}",
        //           method: 'post',
        //           data: {
        //              type: jQuery('#type_'+val).val()
        //           },
        //           success: function(result){
        //             var length = result.values.length;

        //             var option='';

        //             for(i=0;i<length;i++)
        //             {
        //                 option +="<option value=''>"+result.values[i]+"</option>";
        //             }


        //           $("#select_option_show_"+val).show();
        //             $("#select_option_"+val).html(option);
        //             $('#div_'+val).removeClass("col-4");

        //             $('#div_'+val).addClass("col-2");

                  
        //           }});
        //  }
 // }//);
  

$(document).on('click', '.add', function(){
        var html = '<div class="form-row form-group row">';
        html +=' <div class="col-4"><div class="input-group mb-3"><span class="input-group-text @error('first_name') text-danger border-danger @enderror"><i class="ti-user"></i></span><input type="" required="" name="document_name[]" placeholder="Document Title" class="form-control"></div></div>';

        html +='<div class="col-4" id="div_'+j+'"><div class="input-group mb-3"><span class="input-group-text @error('first_name') text-danger border-danger @enderror"><i class="ti-list"></i></span><select required class="form-select" id="type_'+j+'" onchange="myFunction('+j+')" name="document_type[]">';
        html +='<option value="">Select Type</option>';

      @if(!empty($document_types)) @foreach($document_types as $type)
                                             @if($type->status == 1)

                                              

 html +='<option value="{{$type->type_title_url}}">{{ucfirst($type->title)}}</option>';
@endif
  @endforeach @endif

        html +='</select></div></div> <div class="col-2"  id="select_option_show_'+j+'" style="display: none;"><div class="input-group mb-3"><span class="input-group-text @error('first_name') text-danger border-danger @enderror"><i class="ti-list"></i></span><select class="form-select" id="select_option_'+j+'" name="type_value[]"></select></div></div>';

   
        html += '<div class="col-4"><div class="input-group"><input type="file" required="" onchange="return fileValidation('+j+')" id="input_file_'+j+'" name="file_name[]" class="form-control"><button type="button" name="remove" class="btn btn-danger btn-sm remove"><i class="fa fa-trash-o"></i></button></div></div>';
        $('#websiteUrlWrapper').append(html);
        ++j;
    });

    $(document).on('click', '.remove', function(){
        $(this).closest('.form-group').remove();
    });
</script>