@extends('layouts.app')
@section('title', 'Document List')

@section('content')

<?php $leadIdd = last(request()->segments()); ?>
<style>
  .badge
{font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    font-family: "IBM Plex Sans", sans-serif;
    line-height: 1.5;}
    .table > tbody > tr > td, .table > tbody > tr > th {
     padding: 0.8rem; 
    vertical-align: middle;
}

  </style>
<!-- Main content -->
        <section class="content">
      <div class="row">        
        <div class="col-12">
          <div class="box">
           <div class="box-body">   
                      
              <h4 class="box-title text-info mb-0"><i class="fa fa-plus"></i> Add Document For {{$leads->first_name}} {{$leads->last_name}}</h4>
              <a href="{{url('/leads')}}" type="button" style="float:right" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"><i class="fa fa-eye fa-sx"></i> Leads</a> &nbsp;&nbsp;

              <a href="{{url('/leads/view?id=')}}{{$leadIdd}}" style="float:right;margin-top:0px;margin-right:0px;"class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5" >
                  <!-- <button class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5">  --> <i class="fa fa-eye fa-sx" aria-hidden="true"></i> View Lead
                </a> 
<hr class="my-15">
            <form class="no-margin" id="fileupload"  method="post" enctype="multipart/form-data">
                            @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">
                                                <span class="input-group-text @error('first_name') text-danger border-danger @enderror"><i class="ti-list"></i></span>
                                                <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 class="input-group  input-group-sm ">
                                                  <div class="controls">
                                                  <input type="file" required="" name="file_name[]" class="form-control">
                                              </div>
                                                  <span class="input-group-append">
                                                      <button type="button" name="add" class="btn btn-success btn-sm add mb-3 "><i class="fa fa-plus" aria-hidden="true"></i>  </button>
                                                  </span> -->
                                        </div>
                                        </div>
                                    </div>                                    
                            </div>              
                            <div class="box-footer text-end mb-3">                               
                               <a onclick="window.location.reload();" 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> Reset</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> Upload</button>
                            </div>



                            
             </form>

         <div style="width: 10%;" id="imagePreview"></div>

            </div>
          </div>
        </div>
      <div class="row">        
        <div class="col-12">
          <div class="box">
           <div class="box-body">           
                       
            <h4 class="box-title text-info mb-0"><i class="fa fa-user fa-sx"></i> Document List </h4>
             <hr class="my-15">
          
            @include("documents.list")
            </div>
          </div>
        </div>
     
      
     
      </div>
      <!-- /.row -->

      

    </section>
        <!-- /.content -->

        <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>
    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/post') }}",
        method: 'post',
        data: {
            type: selectedType
        },
        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>





@endsection