@extends('layouts.default')
@section('content')
@include('Modal.FileColoumSettingsModal')

<style>
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
    font-weight: bold;
}
td{
     font-weight: bold;
}
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Fields Mapping </h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div><!-- /.col -->

            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <a href="/import_contact"> <i class="bi bi-arrow-left-square-fill" style="font-size: larger;float: left;"></i></a>

    <a href="/file_sync_status/split"> <i class="bi bi-arrow-right-square-fill" style="font-size: larger;float: right;"></i></a>

    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
        @endif
      	@php
        // For table builder
        $array[] = array("colom"=>"parent_file","operator"=>"<>","value"=>0);
	  if(Auth::user()->id!==1)
			$array[] = array("colom"=>"upload_by","operator"=>"=","value"=>Auth::user()->id);
			$array[] = array("colom"=>"colom_maaping","operator"=>"=","value"=>null);
        $params['rawquery'] = json_encode($array);
        // $params = array();
    @endphp
    <input type="hidden" id="rawquery" value="{{json_encode($array)}}">

        {{ TableBuilderHelper::tableBuilder(3,$params,'files-list') }}

    </section>

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
<!-- /.content-wrapper -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<script>
  
jQuery(document).ready(function() {
  setTimeout(function() { 
      $(".alert").hide();
}, 5000);


    $("#processing_image").show();

    var $mstateList = $('#mstateList');
    var urlDropdown = "{{ url(config('laraadmin.adminRoute') . '/urlDropdown') }}";

    jQuery(document).on("click", ".btn-sm", function() {
      // alert('i am Working');
		$("#exampleModal").show();
        $("#processing_image").show();
        var currentRow = jQuery(this).closest("tr");
        var file_id = jQuery.trim(currentRow.find("td:eq(1)").text());
        $fileid = file_id;
        // var urlTableData = "{{ url(config('laraadmin.adminRoute') . '/myfilecoloum') }}" + "?fid=" + file_id;
        // var url = "{{ url('/dms_data_based_on_category') }}"  + "?sid=" + rfqVal;
        var urlTableData = "{{ url('/myfilecoloum') }}" + "?fid=" + file_id;
        $mstateList.empty();
        $.get(urlDropdown, function(datas) {
            var tableHTML = '<table style="width: 100%" id="mapping_table">';
            tableHTML +='<thead><tr><th>Column Heading</th><th>Dropdown Data</th></tr></thead>';
            tableHTML += '<tbody>';

            $.get(urlTableData, {
                file_id: file_id
            }, function(data) {
                var json = JSON.parse(data);
                if (json.length !== 0) {
                    var optionsArray = datas.dropdown_html;
                    var option = "";
                    var selectBox = "";

                    $.each(json, function(key, value) {
                        for (var i = 0; i < optionsArray.length; i++) {
                            if (optionsArray[i].value == json[key].coloumid) {
                                option += '<option value="' + optionsArray[i].value + '" selected>' + optionsArray[i].value + '</option>';
                            } else {
                                option += '<option value="' + optionsArray[i].value + '">' + optionsArray[i].value +'</option>';
                            }
                        }
                        var selectBox = "<select  colom_for = '" + json[key].coloumid + "'  id='col_mapping" + key +"' colom='" + json[key].coloumid +"' class='form-control col_mapping select2'>" + option +"</select>";
                        var option = "";
                        tableHTML += '<tr class="items"><td>' + json[key].coloumid + '</td><td>' + selectBox + '</td></tr>';
                    });
                } else {
                    var colspanValue = 2;
                    tableHTML += '<tr><td colspan="' + colspanValue +'">No Data Available.</td></tr>';
                }
                tableHTML += '</tbody></table>';
                $mstateList.append(tableHTML);
                  jQuery(".select2").select2({
                    dropdownParent: jQuery("#mapping_table"),
                    width: '100%',
                });
            });
            $("#processing_image").hide();
        });

    });


    $(".save_colom_mapping").click(function() {
  $("#processing_image").show();

  var myArray = new Array();
  jQuery('.col_mapping').each(function(i, obj) {
    myArray.push({
      "colom_for": jQuery(obj).attr('colom_for'),
      "value": jQuery(obj).val(),
    });
  });

  var url = "{{ url('/savefieldsMapping') }}";
  var postData = JSON.stringify({
    "data": myArray,
    "fid": $fileid
  });
  var csrfToken = $('meta[name="csrf-token"]').attr('content');
  $.ajax({
    url: url,
    type: "POST",
    data: postData,
    contentType: "application/json",
    beforeSend: function(xhr) {
      xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
    },
    success: function(response) {
      if (response === 0) {
        toastr["error"]("Fields already exist.");
      } else {
        toastr["success"]("Fields Map Successfully!");
      }
      setTimeout(function() {
       location.reload();
       }, 3000);
    },
    error: function() {
      toastr["error"]("Oops, something went wrong while saving data to the database.");
      setTimeout(function() {
      location.reload();
      }, 3000);
    },
  });
});

    // $('.col_mapping').on('change', function() {
    //   var selectedValue = $(this).val();
    //   alert(selectedValue);
    //   $('.col_mapping').not(this).find('option').prop('disabled', false);
    //   $('.col_mapping').not(this).find('option[value="' + selectedValue + '"]').prop('disabled', true);
    // });
    // jQuery(document).on("change", ".col_mapping", function() {
    //     var selectedValue = $(this).val();
    //     $('.col_mapping').not(this).find('option').prop('disabled', false);
    //     $('.col_mapping').not(this).find('option[value="' + selectedValue + '"]').prop('disabled',true);
    // });
});




  $(document).ready(function() {
    $(document).on("change", ".col_mapping", function() {

    // $('.col_mapping').select2();
 
      var selectedValue = $(this).val();
      $('.col_mapping').not(this).find('option').prop('disabled', false);
      // $('.col_mapping').not(this).find('option[value="' + selectedValue + '"]').prop('disabled', true);
      $('.col_mapping').not(this).find('option[value="' + selectedValue + '"]').hide();
      $('.col_mapping').not(this).each(function() {
        if ($(this).val() === selectedValue) {
            $(this).val('');
        }
      });
      
  //     $('.col_mapping').select2({
  //   width: '100%', // Adjust the width as needed
  //   placeholder: 'Search or select an option', // Placeholder text for the search box
  //   allowClear: true, // Option to clear the selection
  // });

    });
  });
</script>

<script src="{{ asset ('/assets/js/expressionbuilder.js') }}"></script>
<!-- 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> -->

@endsection