@extends('layouts.admin.master')

@section('title')Upload file
 {{ $title }}
@endsection

@push('css')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/smartwizard/css/smart_wizard_all.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/scrollable.css')}}">

@endpush

@section('content')
<div class="container-fluid">
    <div class="page-header">
      <div class="row">
        <div class="col-lg-6">
          <h3>Upload</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Upload</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">Registration</a></li>

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

	<div class="container-fluid">
		<div class="row">
		  <div class="col-sm-12">
			<div class="card">
			  <div class="card-header pb-0">
				<h5>Upload enquire</h5>
			  </div>
			  <div class="card-body">
              <div id="smartwizard">
                <ul class="nav">
                    <li class="nav-item">
                    <a class="nav-link" href="#step-1">
                        <div class="num">1</div>
                        Upload file
                    </a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#step-2">
                        <span class="num">2</span>
                        Map field
                    </a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#step-3">
                        <span class="num">3</span>
                        Response
                    </a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                        <form method="post" name="saveDept" id="uploadRegistration" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-12 col-lg-6 col-md-12">
                                    <div class="form theme-form">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    <label>Select Campaign</label>
                                                    @php
                                                        $camp = getLeadStage('Campaign');
                                                    @endphp
                                                    <select class="form-select" name="campaign" id="campaign">
                                                        <option value="">--select Lead Campaign--</option>
                                                        @foreach($camp as $camp_id=>$name)
                                                        <option value="{{$camp_id}}">{{$name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    <label>Select Rule</label>
                                                    @php
                                                        $camp = GetAssignmentRuleModule('Upload');
                                                    @endphp
                                                    <select class="form-select" name="rule" id="rule">
                                                        <option value="">--select assignment rule--</option>
                                                        @foreach($camp as $camp_id=>$name)
                                                        <option value="{{encrypt_decrypt('encrypt',$camp_id)}}">{{$name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <div class="mb-3">
                                                    <label>File</label>
                                                    <input class="form-control" type="file"  name="uploadFile" id ="name" placeholder="Name *" value="" required/>
                                                    <span id="nameError" class="addError"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col justify-content-center">
                                                <div class="text-center">
                                                <!-- <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button> -->
                                                <button class="btn btn-primary" type="submit" id="uploadSubmit">Upload</button>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                        <div class="vertical-scroll scroll-demo">
                            <form  method="post" id="mapField">
                                <div class="row">
                                    <div class="col-6">
                                        <h5>Field mapping</h5>
                                        <input type="hidden" name="id" id="import_id" >
                                        <input type="hidden" name="campaign_id" id="campaign_id" >
                                        <input type="hidden" name="rule_id" id="rule_id" >
                                    </div>
                                    <div class="col-6">
                                        <div class="col justify-content-center">
                                            <div class="pull-right">
                                            <!-- <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button> -->
                                            <button class="btn btn-primary" type="submit" id="uploadSubmit">Proceed</button>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="fieldMapping">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                        <div class="row">
                            <div class="col-12" id="responseDiv">

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

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

	@push('scripts')
	<script src="{{asset('assets/js/smartwizard/js/jquery.smartWizard.min.js')}}"></script>
    <script src="{{asset('assets/js/notify/bootstrap-notify.min.js')}}"></script>
    <script src="{{asset('assets/js/setting/notify.js')}}"></script>
    <script src="{{asset('assets/js/scrollable/perfect-scrollbar.min.js')}}"></script>
    <script src="{{asset('assets/js/scrollable/scrollable-custom.js')}}"></script>
    <script>
    $(function() {
        $('#smartwizard').smartWizard({
            selected: 0,
            toolbar: {
                position: 'none', // none|top|bottom|both
                showNextButton: false, // show/hide a Next button
                showPreviousButton: false, // show/hide a Previous button
                extraHtml: '' // Extra html to show on toolbar
            }
        });
        $("#smartwizard").on("loaded", function(e) {
            let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
             console.log(stepInfo,"stepInfo11");
        });

    });

    var loaderHtml = `<div id="loader">
                    <div class="loader-box">
                        <div class="loader-2"></div>
                    </div>
                    <h6 class="sub-title mb-0 text-center" style="border:none">loading...</h6>
                    </div>`


    $(function(){
            $("#uploadRegistration").submit(function(e){
                e.preventDefault()

                var camp = $("#campaign").val();
                var file = $('#name').val()
                var rule = $('#rule').val()

                if(camp == "")
                {
                    notifyF('Error',"select campaign",'danger',2000)
                    return false;
                }
                if(file=="")
                {
                    notifyF('Error',"select field",'danger',2000)
                    return false;
                }


               $.ajax({
                    url:"{{route('uploadRegistration')}}",
                    type: "post",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
                    beforeSend:function(){
                        $("#uploadSubmit").text('uploading')
                        $("#uploadSubmit").attr('disabled','disabled')
                    },
                    success:function(response)
                    {
                        // console.log(response)
                        // console.log(response.Column)
                        if(response.Response=='Success')
                        {
                            let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
                            mapField(response.Data,response.Column)
                            var id = response.Import_Id
                            var campaign = response.Campaign
                            var rule = response.Rule
                            $("#import_id").val(id)
                            $("#campaign_id").val(campaign)
                            $("#rule_id").val(rule)
                            $('#smartwizard').smartWizard("next");
                            $('#smartwizard').smartWizard("setState", [0], "disable");
                            // notifyF(response.Response,response.Msg,'primary',2000)
                        }
                        else
                        {
                            notifyF(response.Response,response.Msg.Msg[0],'danger',2000)
                        }
                        $("#uploadSubmit").text('Upload')
                        $("#uploadSubmit").attr('disabled',false)
                        // $('#saveUploadEnquire')[0].reset()
                        // setTimeout(() => {
                        //     location.reload()
                        // }, 3000);
                    }
               })
            })
        })

        $(function(){
            $("#mapField").submit(function(e){
                e.preventDefault()
                var excelField = $("input[name='excelField[]']").map(function(){return $(this).val()}).get();
                // console.log(excelField,"field")
                var field = $("select[name='field[]']").map(function(){return $(this).val()}).get();
                field = field.filter(Boolean)
                // console.log(field.length,"leghg")
                // console.log(field,'new')
                if(excelField.length <= 0)
                {
                    notifyF('Error',"select field",'danger',2000)
                    return false;
                }

                if(field.length <= 0 )
                {
                    notifyF('Error',"select mapping field",'danger',2000)
                    return false;
                }

                var data = $(this).serialize()
                e.preventDefault()
                $("body").attr('style', 'cursor:wait !important;');
                $(this).text('Processing..')
                $(this).prop('disabled',true)

               $.ajax({
                   url:"{{route('mapExcelField')}}",
                   type: "post",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                   data: data,
                    beforeSend:function(){
                        $("#uploadSubmit").text('uploading')
                        $("#uploadSubmit").attr('disabled','disabled')
                        $("#responseDiv").empty()
                        $("#responseDiv").append(loaderHtml)


                    },
                    success:function(response)
                    {
                        // console.log(response,'console.lgo')
                        $("body").attr('style', 'cursor:scroll !important;');
                        // $(this).text('Processing..')
                        // $(this).prop('disabled',true)
                        if(response.Response=='Success')
                        {

                            $('#smartwizard').smartWizard("next");
                            $('#smartwizard').smartWizard("setState", [1], "disable");
                            var totalRow = response.Data.totalRow
                            var insertRow = response.Data.insertCount
                            var updateRow = response.Data.updateCount
                            var msg = response.Msg
                            var errorHtml = `
                                 <div class="card-body faq-body">
                                    <div class="media updates-faq-main">
                                        <div class="updates-faq"><i data-feather="rotate-cw"></i></div>
                                        <div class="media-body updates-bottom-time">
                                            <p><a href="javascript:void(0)">Success </a>${msg}</p>
                                            <p>Total Row ${totalRow}</p>
                                            <p>Insert Row ${insertRow}</p>
                                            <p>Update Row ${updateRow}</p>
                                            <p><a href="{{route('uploadFile')}}" id="upload-error-refresh" class="text-success">click here refresh</a></p>
                                        </div>
                                    </div>
                                </div>
                        `
                        $("#responseDiv").empty()
                        $("#responseDiv").append(errorHtml)

                            // setTimeout(() => {
                            //     window.location.href = "{{route('uploadFile')}}"
                            // }, 5000);
                        }
                        else
                        {

                            console.log('else')
                            $('#smartwizard').smartWizard("next");
                            $('#smartwizard').smartWizard("setState", [1], "disable");
                            $("#responseDiv").empty();
                            var errorHtml = `
                                 <div class="card-body faq-body">
                                    <div class="media updates-faq-main">
                                        <div class="updates-faq"><i data-feather="rotate-cw"></i></div>
                                        <div class="media-body updates-bottom-time">
                                            <p><a href="javascript:void(0)" class="text-danger">Error </a></p>
                                            <p>Error Msg ${response.Msg.Msg[0]}</p>
                                            <p>Error at row ${response.Msg.Data[0].rowNo}</p>
                                            <p>${response.Msg.Data[0].value}</p>
                                            <p><a href="{{route('uploadFile')}}" id="upload-error-refresh" class="text-danger">click here refresh</a></p>

                                        </div>
                                    </div>
                                </div>
                        `
                            $("#responseDiv").append(errorHtml);
                            notifyF(response.Response,response.Msg.Msg[0],'danger',2000)
                        }
                        $("#uploadSubmit").text('Upload')
                        $("#uploadSubmit").attr('disabled',false)

                    }
               })
            })
        })
        function mapField(data,column)
        {
            var option =""
            $.each(column,function(index,value){
                console.log('index vcol',index)
                console.log('value vcol',value)
                option += `<option value = '${index}'>${value}</option>`
            })
            var html ="";
            $.each(data,function(index,value){
                html +=`<div class="row">
                            <div class="col-6">
                                <div class="mb-3">
                                    <input class="form-control" type="text" name="excelField[]" value="${value}" readonly id="">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <select class="form-select db-field" name="field[]" >
                                        <option value="">--Select field--</option>
                                       ${option}
                                    </select>
                                </div>
                            </div>
                        </div>`
            })
            $("#fieldMapping").empty();
            $("#fieldMapping").append(html);
        }
    </script>
	@endpush

@endsection