@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('uploadRegistrationTime')}}",
                        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('mapExcelFieldTime')}}",
                        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)

                        },
                        error:function(error)
                        {
                            // console.log(error.responseText,'errorror')
                            $('#smartwizard').smartWizard("setState", [1], "disable");
                            $('#smartwizard').smartWizard("next");
                            var err_arr = JSON.parse(error.responseText)
                            var err_title = err_arr['errors']['Msg'][0]
                            var err_detail_rowNo = err_arr['errors']['Data'][0]


                            // console.log(err_detail_rowNo.Message,'')

                            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)">Error </a>${err_title}</p>
                                            <p>Row ${err_detail_rowNo.rowNo + err_detail_rowNo.Message}</p>
                                        </div>
                                    </div>
                                </div>
                        `

                            $("#responseDiv").empty()
                            $("#responseDiv").append(errorHtml)
                            notifyF('Error','we will redirect to upload in 5 sec','danger',2000)
                            // setTimeout(() => {
                            //         window.location.href = "{{route('uploadFile')}}"
                            //     }, 5000);

                        }
                    })
                })
            })
            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