<?php $LeadListArr = $this->paginator; ?>
<!--Page main section start-->
<section id="min-wrapper" class="active">
    <div id="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <!--Top header start-->
                    <h3 class="ls-top-header">Lead Listing</h3>
                    <!--Top header end -->

                    <!--Top breadcrumb start -->

                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-home"></i></a></li>
                        <li>Magic Box</li>
                        <li><a href="<?php echo $this->baseUrl('/customer/historical-data'); ?>">Historical Data</a></li>
                        <li class="active">Past Queries</li>
                    </ol>
                    <!--Top breadcrumb start -->
                </div>
            </div>
            <!-- Main Content Element  Start-->
            <div class="row">
                <div class="col-md-12">

                </div>




                <div class="col-md-12">
                    <div class="query_listing_bg no-padding">

                        <div class="panel-body">
                            <ul class="nav nav-tabs icon-tab iconmb_top_10">
                                <li class="active"><a href="<?php echo $this->baseUrl('/leaddetail/add-bulk-query'); ?>">Bulk Upload(Past Queries)</a></li>

                            </ul>
                            <div class="clear"></div>
                            <div class="table-responsive">
                                <form method="post" action="" name="addQueryForm" id="addQueryForm">
                                    <table class="table table-bordered no-margin" id="RowsGroup">
                                        <tbody>
                                            <tr>
                                                <td colspan="9" class="pt_top0_0">
                                                    <div class="ttile_text11">Add Query</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>First Name <?php echo MANDATORY_SIGN; ?></td>
                                                <td>Last Name </td>
                                                <td>Email-Id <?php echo MANDATORY_SIGN; ?></td>
                                                <td>Mobile <?php echo MANDATORY_SIGN; ?></td>
                                                <td>Qyery Type<?php echo MANDATORY_SIGN; ?></td>
                                                <td>Destination<?php echo MANDATORY_SIGN; ?></td>
                                                <td>Query date<?php echo MANDATORY_SIGN; ?></td>
                                                <td>travel Date</td>
                                                <td>&nbsp;</td>
                                            </tr>
                                            <tr id="Row1">
                                                <td><div class="mb_tdwidth_150px pt_relative"><input name="first_name[]" autocomplete="off" id="first_name1" class="form-control ratetxtwidth70 whbg " type="text"></div></td>
                                                <td><div class="mb_tdwidth_150px pt_relative"><input name="last_name[]" autocomplete="off" id="last_name1" class="form-control ratetxtwidth70 whbg " type="text"></div></td>
                                                <td><div class="mb_tdwidth_150px pt_relative">
                                                    <input name="email_id[]" autocomplete="off" id="email_id1" class="form-control ratetxtwidth70 whbg " type="text">
                                                    <span id="emailexist1" style="display:none;color:red;">Email id already exists <a href="#" target="_blank" class="emailViewDetails1">view</a></span>
                                                   </div>
                                                </td>
                                                <td><div class="mb_tdwidth_150px pt_relative"><input name="mobile[]" autocomplete="off" id="mobile1" onkeyup="return isNumber(event);" class="form-control ratetxtwidth70 whbg input0 MobilevalMaxMin" type="text">
                                                    <span id="mobileexist1" style="display:none;color:red;">Mobile number already exist <a href="#" target="_blank" class="mobileViewDetails1">view</a></span>
                                                </div>
                                                </td>
                                                <td><div class="mb_tdwidth_150px pt_relative">
                                                    <select id="queryType1" name="queryType[]" class="form-control " placeholder="Select">
                                                        <option value="1">Flight</option>
                                                        <option value="2">Hotel</option>
                                                        <option value="5" selected="true">Package</option>
                                                        <option value="6">Visa</option>
                                                        <option value="7">Forex</option>
                                                        <option value="8">Activity</option>
                                                        <option value="9">SightSeeing</option>

                                                    </select>
                                                </div>
                                                </td>
                                                <td><div class="mb_tdwidth_150px pt_relative">
                                                    <input name="destination[]" autocomplete="off" id="destination1" class="form-control ratetxtwidth70 whbg " onkeyup="get_city_autosuggest_country('destination1','hidden_destination1','','hidden_destination_country1');" type="text">
                                                    <input type="hidden" id="hidden_destination1" name="hidden_destination[]" value="" />
                                                    <input type="hidden" id="hidden_destination_country1" name="hidden_destination_country[]" value="" />
                                                </div>

                                                </td>
                                                <td><div class="mb_tdwidth_150px pt_relative"><input name="query_date[]" id="query_date1" class="form-control ratetxtwidth70 whbg " type="text"></div></td>
                                                <td><div class="mb_tdwidth_150px pt_relative"><input name="travel_date[]" id="travel_date1" class="form-control ratetxtwidth70 whbg " type="text"></div></td>
                                                <td><div class="mb_tdwidth_80px pt_relative">
                                                    <span class="removeButton btn ls-red-btn btn-sm" title="Remove" style="display:none"><i class="fa fa-trash-o"></i></span>
                                                    <button value="Enter Rates" class="btn btn-warning btn-sm" id="saveButton1" type="submit"><i class="fa fa-plus"></i></button>
                                                </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table class="table" width="100%" border="0">
                                        <tbody>
                                            <tr style="display:none;">
                                                <td align="right"><button type="button" class="btn btn-success btn-sm" id="addButton"><i class="fa fa-plus"></i> More</button></td>
                                            </tr>
                                            <tr>
                                                <td align="right">
                                                    <input type="hidden" name="isExistCustomer" id="isExistCustomer" value="1" />
                                                    <input type="hidden" name="counter[]" value="1" id="counter" />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Main Content Element  End-->
        </div>
    </div>
    <?php echo $this->render('copyrightfooter.phtml'); ?>
</section>
<!--Page main section end -->
<div class="modal fade" id="viewquotesupplier" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        </div>
    </div>
</div>

<?php echo $this->render('common-modals/customer.phtml'); ?>
<?php
//echo $this->render('modals.phtml');
echo $this->render('newfooter.phtml');

?>
<script src="<?php echo $this->baseUrl('public/assets/js/selectCityTypeahead.js'); ?>"></script>
<script src="<?php echo $this->baseUrl('public/js/jquery.validate.min.js'); ?>"></script>
<script src="<?php echo $this->baseUrl('public/assets/js/bootstrap3-typeahead.js'); ?>"></script>
<script>
    $(document).ready(function() {
        var from_date = $('#query_date1').datetimepicker({
            timepicker: false,
            datepicker: true,
            formatDate: 'd/m/Y',
            maxDate: 0,
            format: 'd/m/Y',
            mask: true,
        });

        var to_date = $('#travel_date1').datetimepicker({
            timepicker: false,
            datepicker: true,
            defaultDate: false,
            formatDate: 'd/m/Y',
            format: 'd/m/Y',
            maxDate: 0,
            mask: true,
            defaultSelect: false,
        });
        var counter = '2';
        $("#addButton").click(function() {
            var newTextBoxTr = $(document.createElement('tr')).attr("id", 'Row' + counter);
            newTextBoxTr.after().html('<td><input name="first_name[]" autocomplete="off" id="first_name' + counter + '" class="form-control ratetxtwidth70 whbg " type="text"></td>' +
                '<td><input name="last_name[]" autocomplete="off" id="last_name' + counter + '" class="form-control ratetxtwidth70 whbg " type="text"></td>' +
                '<td><input name="email_id[]" autocomplete="off"  id="email_id' + counter + '" class="form-control ratetxtwidth70 whbg " type="text">' +
                '<span id = "emailexist' + counter + '" style = "display:none;color:red;">Email id already exists <a href="#" target="_blank" class="emailViewDetails' + counter + '">view</a></span>' +
                '</td> ' +
                '<td><input name="mobile[]" autocomplete="off" id="mobile' + counter + '"  onkeyup="return isNumber(event);" class="form-control ratetxtwidth70 whbg input0" type="text">' +
                '<span id = "mobileexist' + counter + '" style = "display:none;color:red;">Mobile number already exist <a href="#" target="_blank" class="mobileViewDetails' + counter + '">view</a></span>' +
                '</td> ' +
                '<td>' +
                '<select id="queryType' + counter + '" name="queryType[]" class="form-control " placeholder="Select">' +
                '<option value="1">Flight</option>' +
                '<option value="2">Hotel</option>' +
                '<option value="5" selected="true">Package</option>' +
                '<option value="6">Visa</option>' +
                '<option value="7">Forex</option>' +
                '<option value="8">Activity</option>' +
                '<option value="9">SightSeeing</option>' +
                '</select>' +
                '</td>' +
                '<td>' +
                '<input name="destination[]" autocomplete="off" id="destination' + counter + '" class="form-control ratetxtwidth70 whbg" onkeyup=\'get_city_autosuggest_country(\"destination' + counter + '\","\hidden_destination' + counter + '\","","\hidden_destination_country' + counter + '\");\',"\hidden_destination_country' + counter + '\");\' type="text">' +
                '<input type="hidden" id="hidden_destination' + counter + '" name="hidden_destination[]" value=""/>  ' +
                '<input type="hidden" id="hidden_destination_country' + counter + '" name="hidden_destination_country[]" value=""/>  ' +
                '</td>' +
                '<td><input name="query_date[]" id="query_date' + counter + '" class="form-control ratetxtwidth70 whbg " type="text"></td>' +
                '<td><input name="travel_date[]" id="travel_date' + counter + '" class="form-control ratetxtwidth70 whbg " type="text"></td>' +
                '<td><span class="removeButton btn ls-red-btn btn-sm" title="Remove"  style="display:none"><i class="fa fa-trash-o"></i></span>' +
                '<button value="Enter Rates" class="btn btn-warning btn-sm" id="saveButton' + counter + '" type="submit"><i class="fa fa-plus"></i></button>' +
                '<input type="hidden" name="counter[]" value="' + counter + '" id="counter" />' +
                '</td>');
            newTextBoxTr.appendTo("#RowsGroup");


            var from_date = $('#query_date' + counter).datetimepicker({
                timepicker: false,
                datepicker: true,
                maxDate: 0,
                formatDate: 'd/m/Y',
                format: 'd/m/Y',
                mask: true,
            });

            var to_date = $('#travel_date' + counter).datetimepicker({
                timepicker: false,
                datepicker: true,
                defaultDate: false,
                maxDate: 0,
                formatDate: 'd/m/Y',
                format: 'd/m/Y',
                mask: true,
                defaultSelect: false,
            });
            counter++;
            validateAddQueryForm();
        });
        $("#RowsGroup").on('click', '.removeButton', function() {
            $(this).parent().parent().remove();
        });
        $.validator.addMethod("noStartEndWhiteSpaces", function(value, element) {
            return this.optional(element) || /^[a-zA-Z0-9](?:[a-zA-Z0-9 ]*[a-zA-Z0-9])?$/.test(value);
        }, "Spaces are not allowed.");
        jQuery.validator.addMethod(
            "validDate",
            function(value, element) {
                var check = false;
                var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
                if (re.test(value)) {
                    var adata = value.split('/');
                    var dd = parseInt(adata[0], 10);
                    var mm = parseInt(adata[1], 10);
                    var yyyy = parseInt(adata[2], 10);
                    var xdata = new Date(yyyy, mm - 1, dd);
                    if ((xdata.getFullYear() === yyyy) && (xdata.getMonth() === mm - 1) && (xdata.getDate() === dd)) {
                        check = true;
                    } else {
                        check = false;
                    }
                } else {
                    check = false;
                }
                return this.optional(element) || check;
            },
            "The date is not a valid"
        );

    });
    validateAddQueryForm();

    function validateAddQueryForm() {
        $("#addQueryForm").validate({
            //debug: true,
            //ignore: [],  
            highlight: function(error, element) {
                var name = $(element).attr("name");
                $("input[name=" + name + "]").removeClass('error');

            },
            rules: {
                "first_name[]": {
                    required: true,
                    noStartEndWhiteSpaces: true
                },
                /*"last_name[]": {
                	required: true,
                },*/
                "email_id[]": {
                    required: true,
                    email: true,
                },
                "mobile[]": {
                    required: true,
                    number: true,
                    min: 10,
                    maxlength: 15
                },
                /*"destination[]": {
                	required: true,
                },*/
                "hidden_destination[]": {
                    required: true,
                },
                "query_date[]": {
                    required: true,
                    validDate: true,
                },
                "travel_date[]": {
                    required: true,
                    validDate: true,
                },
            },

            submitHandler: function() {
                /*var isExistCustomer=$.trim($("#isExistCustomer").val());
                if(isExistCustomer==1){
                	alert("Email or mobile already exist.");
                	return false;
                }*/
                var data = $('#addQueryForm').serialize();
                $.ajax({
                    url: '/leaddetail/save-bulk-query',
                    data: data,
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function(data) {
                        //$("#saveButton").attr("disabled",true);
                        //$("#saveButton").html("Please wait...");
                        //$("#saveQueryButton").html('Please wait...');
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            //$("#saveButton").removeAttr("disabled");
                            //$("#saveButton").html("Please wait...");
                            alert(response.msg);
                            $("#Row" + response.counter).remove();
                            $("#addButton").trigger('click');
                        } else {
                            alert(response.msg);
                        }
                    },
                    error: function() {
                        alert("fail : Please try after some time");
                    }
                });
            },
        });

    }

    function ChkDuplicateEmailDynamic(id, counter) {
        var emailID = $.trim($("#" + id).val());
        jQuery.ajax({
            url: '/customer/get-customer-detail',
            type: 'POST',
            dataType: 'json',
            data: {
                emailID: emailID
            },
            success: function(result) {
                //alert(result);
                if (result.status == 'success') {
                    if (result.CustomerSysId != '') {
                        $("#emailexist" + counter).show();
                        $(".emailViewDetails" + counter).attr('href', reqUrl + '/customer/customer-profile-desc/id/' + result.CustomerSysId);
                        $("#isExistCustomer").val(1);
                    } else {
                        $("#emailexist" + counter).hide();
                        $("#isExistCustomer").val(0);
                    }
                    return false;
                } else {
                    $("#emailexist" + counter).hide();
                    $("#isExistCustomer" + counter).val(0);
                }

            }
        });
    }

    function ChkDuplicateMobileDynamic(id, counter) {
        var mobilenum = $.trim($("#" + id).val());
        if (mobilenum != '') {
            jQuery.ajax({
                url: '/customer/get-customer-detail',
                type: 'POST',
                dataType: 'json',
                data: {
                    mobilenum: mobilenum
                },
                beforeSend: function() {
                    //$().attr('disabled',true);
                },
                success: function(result) {
                    if (result.status == 'success') {
                        if (result.CustomerSysId != '') {
                            $("#mobileexist" + counter).show();
                            $(".mobileViewDetails" + counter).attr('href', reqUrl + '/customer/customer-profile-desc/id/' + result.CustomerSysId);
                            $("#isExistCustomer").val(1);
                        } else {
                            $("#mobileexist" + counter).hide();
                            $("#isExistCustomer").val(0);
                        }
                    } else {
                        $("#mobileexist" + counter).hide();
                        $("#isExistCustomer").val(0);
                    }
                }
            });
        }
    }
</script>
<style>
   /* .error {
        position: relative !important;
        bottom: 0px;
    }*/

     .error {
        position: absolute !important;
        bottom: 0px;
    }

    .success {
        position: relative;
        top: -25px;
        right: 10px;
        float: right;
        width: 16px;
        height: 16px;
        display: inline-block;
        color: #449D44;
    }
    
 @media screen and (max-width: 767px){
        .table-responsive {
            width: 100%;
            margin-bottom: 15px;
            overflow-x: auto !important;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            border: 1px solid #ddd;
        }
}
</style>