@extends('layout.main')
@section('content')
    <ol class="breadcrumb bc-3">
        <li>
            <a href="{{action('dashboard')}}"><i class="entypo-home"></i>Home</a>
        </li>
        <li class="active">
            <strong>Upload SMS Rates</strong>
        </li>
    </ol>
    <h3>Upload SMS Rates</h3><br/>
    {{--@include('accounts.errormessage')--}}
    <div class="row">
        <div class="col-md-12">
            <form role="form" id="form-upload" name="form-upload" method="post" action="{{URL::to('vendor_rates/'.$id.'/process_upload')}}" class="form-horizontal form-groups-bordered" enctype="multipart/form-data">
                <div class="panel panel-primary" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">
                            Upload SMS Rate Sheet
                        </div>

                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <input type="hidden" name="RateUploadType" value="{{RateUpload::smsratetable}}">
                        <div class="form-group {{RateUpload::smsratetable.'content'}} typecontentbox">
                            <label for="field-1" class="col-sm-2 control-label">SMS Ratetable</label>
                            <div class="col-sm-4">
                                {{ Form::select('Ratetable', $Ratetables, $RatetableID , array("class"=>"select2","id"=>RateUpload::smsratetable)) }}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="field-1" class="col-sm-2 control-label">Upload Template</label>
                            <div class="col-sm-4">
                                {{ Form::select('uploadtemplate', [], "" , array("class"=>"select2","id"=>"uploadtemplate")) }}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="field-1" class="col-sm-2 control-label">Upload (.xls, .xlsx, .csv)</label>
                            <div class="col-sm-1">
                                <input name="excel" id="excel" type="file" class="form-control file2 inline btn btn-primary" data-label="<i class='glyphicon glyphicon-circle-arrow-up'></i>&nbsp;   Browse" />
                            </div>
                        </div>
                        <div class="form-group hidden" id="rateBox">
                            <label class="col-sm-2 control-label">
                               Import Rates From Sheet
                            </label>
                            <div class="col-sm-4">
                                {{ Form::select('importratesheet', [], "" , array("class"=>"select2","id"=>"importrate")) }}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Settings</label>
                            <div class="col-sm-10">
                                <div class="checkbox ">
                                    <label>
                                        <input type="hidden" name="checkbox_replace_all" value="0" >
                                        <input type="checkbox" id="rd-1" name="checkbox_replace_all" value="1" > Replace all of the existing rates with the rates from the file
                                    </label>
                                </div>
                                <div class="checkbox ">
                                    <input type="hidden" name="checkbox_rates_with_effected_from" value="0" >
                                    <label><input type="checkbox" id="rd-1" name="checkbox_rates_with_effected_from" value="1" checked> Rates with 'effective from' date in the past should be uploaded as effective immediately</label>
                                </div>
                                <div class="checkbox ">
                                    <input type="hidden" name="checkbox_add_new_codes_to_code_decks" value="0" >
                                    <label><input type="checkbox" id="rd-1" name="checkbox_add_new_codes_to_code_decks" value="1" checked> Add new codes from the file to code decks</label>
                                </div>
                                <input type="hidden" name="checkbox_review_rates" value="0" >
                                <div class="radio ">
                                    <label><input type="radio" name="radio_list_option" value="1" checked>Complete File</label> <span class="label label-info popover-primary" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="if complete file, codes which are not in the file will be deleted." data-original-title="Completed List">?</span>
                                    <br/>
                                    <label><input type="radio" name="radio_list_option" value="2">Partial File</label> <span class="label label-info popover-primary" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="if partial file, codes only in the file will be processed." data-original-title="Partial List">?</span>
                                </div>
                                <div style="margin-top:10px;">
                                    <label for="field-1" class="col-sm-2 control-label" style="text-align: right;">Skips rows from Start (Rate)</label>
                                    <div class="col-sm-3" style="padding-left:40px;">
                                        <input name="start_row" type="number" class="form-control" data-label="<i class='glyphicon glyphicon-circle-arrow-up'></i>&nbsp;   Browse" style="" placeholder="Skips rows from Start" min="0" value="0">
                                    </div>
                                    <label class="col-sm-3 control-label" style="text-align: right;">Skips rows from Bottom (Rate)</label>
                                    <div class="col-sm-3">
                                        <input name="end_row" type="number" class="form-control" data-label="<i class='glyphicon glyphicon-circle-arrow-up'></i>&nbsp;   Browse" placeholder="Skips rows from Bottom" min="0" value="0">
                                    </div>
                                </div>
                                <br/><br/>
                            </div>
                            </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">Note</label>
                            <div class="col-sm-8">
                                <p><i class="glyphicon glyphicon-minus"></i><strong>Allowed Extension</strong> .xls, .xlsx, .csv</p>
                               <!-- <p>Please upload the file in given <span style="cursor: pointer" onclick="jQuery('#modal-fileformat').modal('show');" class="label label-info">Format</span></p>
                                <p>Sample File <a class="btn btn-success btn-sm btn-icon icon-left" href="{{URL::to('vendor_rates/download_sample_excel_file')}}"><i class="entypo-down"></i>Download</a></p>-->
                                <i class="glyphicon glyphicon-minus"></i> <strong>Replace all of the existing rates with the rates from the file -</strong> The default option is to add new rates. If there is at least one parameter that differentiates a new rate from the existent one then the new rate will override it. If a rate for a certain prefix exists in the tariff but is not present in the file you received from the carrier, it will remain unchanged. The replace mode uploads all the new rates from the file and marks all the existent rates as discontinued. <br><br>
                                <i class="glyphicon glyphicon-minus"></i> <strong>Rates with 'effective from' date in the past should be uploaded as 'effective immediately' - </strong> Sometimes you might receive a file with rates later than expected, when the moment at which the rates were supposed to become effective has already passed. By default this check box is disabled and a rate that has an 'effective from' date that has passed will be rejected and not included in the tariff. Altematively, you may choose to insert these rates into the tariff and make them effective from the current moment; to do so enable this check box. <br><br>
                            </div>
                        </div>

                        <p style="text-align: right;">
                            <button  type="submit" class="btn upload btn-primary btn-sm btn-icon icon-left" data-loading-text="Loading...">
                                <i class="glyphicon glyphicon-circle-arrow-up"></i>
                                Upload
                            </button>
                        </p>

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

    <div class="row hidden" id="add-template">
        <div class="col-md-12">
            <form role="form" name="add-template-form" id="add-template-form" method="post" class="form-horizontal form-groups-bordered">
                <input name="start_row" type="hidden" value="0" min="0">
                <input name="end_row" type="hidden" value="0" min="0">
                <input type="hidden" name="ProcessID" id="ProcessID" value="" />
                <input type="hidden" name="TemplateType" id="TemplateType" value="{{FileUploadTemplateType::getTemplateType(FileUploadTemplate::TEMPLATE_SMS_RATETABLE_RATE)}}" />
                <input type="hidden" name="FileUploadTemplateID" id="FileUploadTemplateID" value="" />

                <div class="panel panel-primary" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">
                            Add New Template
                        </div>

                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="field-1" class="col-sm-2 control-label">Template Name:</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="TemplateName" value="" />
                            </div>
                        </div>
                        <br />
                        <br />
                        <div class="panel panel-primary" data-collapsed="0">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    Import Options
                                </div>

                                <div class="panel-options">
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                </div>
                            </div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label for="field-1" class="col-sm-2 control-label">Delimiter:</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" name="option[Delimiter]" value="," />
                                        <input type="hidden" name="TemplateFile" value="" />
                                        <input type="hidden" name="TempFileName" value="" />
                                    </div>
                                    <label for="field-1" class="col-sm-2 control-label">Enclosure:</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" name="option[Enclosure]" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <br />
                                    <br />
                                    <label class="col-sm-2 control-label">Escape:</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" name="option[Escape]" value="" />
                                    </div>
                                    <label for="field-1" class="col-sm-2 control-label">First row:</label>
                                    <div class="col-sm-4">
                                        {{Form::select('option[Firstrow]', array('columnname'=>'Column Name','data'=>'Data'),'',array("class"=>"select2 small"))}}
                                    </div>
                                </div>
                                <p style="text-align: right;">
                                    <br />
                                    <br />
                                    <button class="check btn btn-primary btn-sm btn-icon icon-left">
                                        <i class="entypo-floppy"></i>
                                        Check
                                    </button>
                                </p>
                            </div>
                        </div>
                        <div class="panel panel-primary" data-collapsed="0">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    Field Remapping
                                </div>

                                <div class="panel-options">
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                </div>
                            </div>

                            <div class="panel-body field-remaping" id="mapping">
                                                                @include('fileuploadtemplates.smsrateuploadtemplate')
                            </div>
                        </div>
                        <div class="panel panel-primary" data-collapsed="0">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    File to be loaded
                                </div>

                                <div class="panel-options">
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                </div>
                            </div>

                            <div class="panel-body scrollx">
                                <div id="table-4_processing" class="dataTables_processing hidden">Processing...</div>
                                <table class="table table-bordered datatable" id="table-4">
                                    <thead>
                                    <tr>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <p style="text-align: right;">

                            <button id="save_template" type="submit"  class="save btn btn-primary btn-sm btn-icon icon-left" data-loading-text="Loading...">
                                <i class="entypo-floppy"></i>
                                Save
                            </button>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <style>
        #selectcheckbox-new,#selectcheckbox-deleted{
            padding: 15px 10px;
        }
        .change-selected {
            margin-top: 13px;
            margin-right: 27px;
        }
        #modal-reviewrates .modal-body {
            overflow-y: auto;
        }
        .radio {
            min-height: 16px !important;
        }
    </style>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            getUploadTemplates('{{$RateUploadType}}'); //get templates by type for ex. vendor,customer,ratetable rate upload template

            $(document).on('change','#excel', function() {
                var formData = new FormData($('#form-upload')[0]);
                show_loading_bar(0);
                $.ajax({
                    url:  '{{URL::to('sms_rate_upload/getSheetNamesFromExcel')}}',  //Server script to process data
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function(){
                        $('.btn.upload').button('loading');
                        show_loading_bar({
                            pct: 50,
                            delay: 5
                        });
                    },
                    success: function (response) {
                        show_loading_bar({
                            pct: 100,
                            delay: 2
                        });
                        $('.btn.upload').button('reset');
                        if (response.status == 'success') {
                            var SheetNames = response.SheetNames;
                            var Extension = response.FileExtesion;
                            var html = '<option value="">Please Select Sheet</option>';

                            for (var i = 0; i < SheetNames.length; i++) {
                                    html += '<option value="' + SheetNames[i] + '" selected="selected">' + SheetNames[i] + '</option>';
                            }

                            $("#importrate").select2("val", "");
                            $('#importrate').html(html);
                            $('#rateBox').removeClass('hidden');

                            var isMobileVersion = document.getElementsByClassName('snake--mobile');
                            if (isMobileVersion.length > 0) {
                                // elements with class "snake--mobile" exist
                            }

                            var importratesheet = $('option:selected', $('#uploadtemplate')).attr('importratesheet');
                            if(importratesheet != undefined && importratesheet != '') {
                                $('#importrate').val(importratesheet);
                            }
                            $('#importrate').trigger('change');

                        } else {
                            toastr.error(response.message, "Error", toastr_opts);
                        }
                    },
                    // Form data
                    data: formData,
                    //Options to tell jQuery not to process data or worry about content-type.
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

            $("#form-upload select[name='uploadtemplate']").change(function(){
                var option=$(this).find("option[value='"+$(this).val()+"']");
                var start_row   = option.attr("start_row");
                var end_row     = option.attr("end_row");
                //var Sheet       = option.attr("Sheet");
                var importratesheet       = option.attr("importratesheet");

                $("#form-upload input[name=start_row]").val(start_row);;
                $("#form-upload input[name=end_row]").val(end_row);
                //$("#form-upload select[name=Sheet]").val(Sheet);
                $("#form-upload select[name=importratesheet]").val(importratesheet);

                $("#form-upload select[name='importratesheet']").trigger('change');
            });

            $('.btn.upload').click(function(e){
                e.preventDefault();
                var ratesheet = $('#importrate').val();

                if(ratesheet == null || ratesheet == ''){
                    toastr.error("Please Select a Rate Sheet", "Error", toastr_opts);
                    return false;
                }
                var formData = new FormData($('#form-upload')[0]);
                show_loading_bar(0);
                $.ajax({
                    url:  '{{URL::to('sms_rate_upload/checkUpload')}}',  //Server script to process data
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function(){
                        $('.btn.upload').button('loading');
                        show_loading_bar({
                            pct: 50,
                            delay: 5
                        });

                    },
                    afterSend: function(){
                        console.log("Afer Send");
                    },
                    success: function (response) {
                        show_loading_bar({
                            pct: 100,
                            delay: 2
                        });
                        $('.btn.upload').button('reset');
                        if (response.status == 'success') {
                            var data = response.data;
                            createGrid(data);

                            $('#add-template').removeClass('hidden');
                            var scrollTo = $('#add-template').offset().top;
                            $('html, body').animate({scrollTop:scrollTo}, 1000);
                        } else {
                            toastr.error(response.message, "Error", toastr_opts);
                        }
                        //alert(response.message);

                        if($('#checkbox_review_rates').is(':checked')) {
                            $('#save_template').addClass('reviewrates');
                        } else {
                            $('#save_template').removeClass('reviewrates');
                        }
                        $('#ProcessID').val('');
                    },
                    // Form data
                    data: formData,
                    //Options to tell jQuery not to process data or worry about content-type.
                    cache: false,
                    contentType: false,
                    processData: false
                });
                //}
            });

            $('.btn.check').click(function(e){
                e.preventDefault();
                var formData = new FormData($('#add-template-form')[0]);
                var poData = $(document.forms['form-upload']).serializeArray();
                for (var i=0; i<poData.length; i++){
                    if(poData[i].name!='excel'){
                        formData.append(poData[i].name, poData[i].value);
                    }
                }
                $.ajax({
                    url:'{{URL::to('sms_rate_upload/ajaxfilegrid')}}',
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function(){
                        $('.btn.check').button('loading');
                    },
                    success: function(response) {
                        $('.btn.check').button('reset');
                        if (response.status == 'success') {
                            var data = response.data;
                            createGrid(data);
                        } else {
                            toastr.error(response.message, "Error", toastr_opts);
                        }
                    },
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

            $("#save_template").click(function(e){
                e.preventDefault();
                if($("#save_template").hasClass('reviewrates')) {
                    var formData = new FormData($('#add-template-form')[0]);
                    var poData = $(document.forms['form-upload']).serializeArray();
                    for (var i = 0; i < poData.length; i++) {
                        if (poData[i].name != 'excel') {
                            formData.append(poData[i].name, poData[i].value);
                        }
                    }
                    $.ajax({
                        url: '{{URL::to('sms_rate_upload/reviewRates')}}', //Server script to process data
                        type: 'POST',
                        dataType: 'json',
                        beforeSend: function () {
                            $('.btn.save').button('loading');
                        },
                        success: function (response) {
                            $('.btn.save').button('reset');
                            if (response.status == 'success') {
                                toastr.success(response.message, "Success", toastr_opts);
                                $("#FileUploadTemplateID").val(response.FileUploadTemplateID);
                                getReviewRates(response.ProcessID,{});
                                $('#ProcessID').val(response.ProcessID);
                            } else {
                                toastr.error(response.message, "Error", toastr_opts);
                            }
                        },
                        data: formData,
                        //Options to tell jQuery not to process data or worry about content-type.
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                } else {
                    var formData = new FormData($('#add-template-form')[0]);
                    var poData = $(document.forms['form-upload']).serializeArray();
                    for (var i = 0; i < poData.length; i++) {
                        if (poData[i].name != 'excel') {
                            formData.append(poData[i].name, poData[i].value);
                        }
                    }
                    $.ajax({
                        url: '{{URL::to('sms_rate_upload/storeTemplate')}}', //Server script to process data
                        type: 'POST',
                        dataType: 'json',
                        beforeSend: function () {
                            $('.btn.save').button('loading');
                        },
                        success: function (response) {
                            $("#save_template").button('reset');
                            if (response.status == 'success') {
                                toastr.success(response.message, "Success", toastr_opts);
                                reloadJobsDrodown(0);
                                location.reload();
                            } else {
                                toastr.error(response.message, "Error", toastr_opts);
                            }
                        },
                        data: formData,
                        //Options to tell jQuery not to process data or worry about content-type.
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                }
            });
        });

        function createGrid(data){
            var tr = $('#table-4 thead tr');
            var body = $('#table-4 tbody');
            tr.empty();
            body.empty();

            $.each( data.columns, function( key, value ) {
                tr.append('<th>'+value+'</th>');
            });

            $.each( data.rows, function(key, row) {
                var tr = '<tr>';

                $.each( row, function(key, item) {
                    if(typeof item == 'object' && item != null ){
                        tr+='<td>'+item.date+'</td>';
                    }else{
                        tr+='<td>'+item+'</td>';
                    }
                });

                tr += '</tr>';
                body.append(tr);
            });
            $("#mapping select").each(function(i, el){
                if(el.name !='selection[DateFormat]'){
                    var self = $('#add-template-form [name="'+el.name+'"]');
                    rebuildSelect2(self,data.columns,'Skip loading');
                }
            });
            if(data.FileUploadTemplate){
                $.each( data.FileUploadTemplate, function( optionskey, option_value ) {
                    if(optionskey == 'Title'){
                        $('#add-template-form').find('[name="TemplateName"]').val(option_value)
                    }
                    if(optionskey == 'Options'){
                        $.each( option_value.option, function( key, value ) {
                            if(typeof $("#add-template-form [name='option["+key+"]']").val() != 'undefined'){
                                $('#add-template-form').find('[name="option['+key+']"]').val(value)
                                if(key == 'Firstrow'){
                                    $("#add-template-form [name='option["+key+"]']").val(value).trigger("change");
                                }
                            }
                        });
                        $.each( option_value.selection, function( key, value ) {
                            if(typeof $("#add-template-form input[name='selection["+key+"]']").val() != 'undefined'){
                                $('#add-template-form').find('input[name="selection['+key+']"]').val(value)
                            }else if(typeof $("#add-template-form select[name='selection["+key+"]']").val() != 'undefined'){
                                $("#add-template-form [name='selection["+key+"]']").val(value).trigger("change");
                            }
                        });
                    }
                });
            }

            $('#add-template-form').find('[name="start_row"]').val(data.start_row);
            $('#add-template-form').find('[name="end_row"]').val(data.end_row);
            $('#add-template-form').find('[name="TemplateFile"]').val(data.filename);
            $('#add-template-form').find('[name="TempFileName"]').val(data.tempfilename);

            if(typeof data.TemplateType !== 'undefined') {
                $('#add-template-form').find('[name="TemplateType"]').val(data.TemplateType);
            }
        }

        function getUploadTemplates($RateUploadType) {
            $.ajax({
                url: '{{URL::to('sms_rate_upload/getUploadTemplates')}}/'+$RateUploadType,
                data: 'Type='+$RateUploadType,
                type: 'POST',
                dataType: 'json',
                success: function (response) {
                    if (response.status == 'success') {
                        var html = '';
                        var Templates = response.FileUploadTemplates;
                        //alert (JSON.stringify(Templates));
                        for(key in Templates) {
                            if(Templates[key]["Title"] == 'Select') {
                                html += '<option value="'+Templates[key]["FileUploadTemplateID"]+'" start_row="'+Templates[key]["start_row"]+'" end_row="'+Templates[key]["end_row"]+'" importratesheet="'+Templates[key]["importratesheet"]+'" selected>'+Templates[key]["Title"]+'</option>';
                            } else {
                                html += '<option value="'+Templates[key]["FileUploadTemplateID"]+'" start_row="'+Templates[key]["start_row"]+'" end_row="'+Templates[key]["end_row"]+'" importratesheet="'+Templates[key]["importratesheet"]+'" >'+Templates[key]["Title"]+'</option>';
                            }
                        }
                        $('#uploadtemplate').html(html).trigger('change');
                    } else {
                        toastr.error(response.message, "Error", toastr_opts);
                    }
                },
                error: function () {
                    toastr.error("error", "Error", toastr_opts);
                }
            });
        }
    </script>
@stop
@section('footer_ext')
    @parent
@stop