<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Customer Points Page</title>
    <link href="Theme/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/plugins/nvd3/nv.d3.min.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/plugins/mapplic/css/mapplic.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/rickshaw/rickshaw.min.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" type="text/css" media="screen">
    <link href="Theme/plugins/jquery-metrojs/MetroJs.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/css/pages-icons.css" rel="stylesheet" type="text/css">
    <link class="main-stylesheet" href="Theme/css/pages.css" rel="stylesheet" type="text/css" />
    <script src="Theme/plugins/jquery/jquery-2.1.1.js" type="text/javascript"></script>
    
</head>

<body>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        body {
            background-color: #f3f3f3;
        }

        .title { 
            font-size: 2em;
            color: #000000;
        }

        .cust_phone { 
            font-size: 1.3em;
            color: #808080;
            margin-bottom: 20px;
        } 

        #not_found {
            color: #FF0000;
        }

        .customer_phone{
            font-size: 1.2em;
            color: #808080;
            margin-bottom: 30px;
        }
        
        .red-star{
            font-size: 1em;
            color: #FF0000;
        }

        .customer-card {
            background-color: #fdfefe;
            max-width: 550px;
            min-height: 400px;
            margin: 0 auto;
            margin-top: 50px;
            margin-bottom: 150px;
            box-shadow: 8px 12px 30px #b3b3b3;
            color: #919495;
            font-weight: normal;
            text-align: left;
            font-size: 18px;
            position: relative;
        }

        .customer-details {
            width: 100%;
            height: auto;
            text-align: center;
            padding: 30px;
        }
        
        .customer-details .phone{
            width: 100%;
            height: auto;
            text-align: center;
        }

        .customer-details .phone .customer_phone{
            text-align: center;
        }

        .customer-details h2, h3 {
            color: #808080;
        }

        .customer-details button {
            width: 150px;
            height: 50px;
            margin-top: 20px;
            background-color: #337AB7;
            border-radius: 0;
            color: #fff;
            box-shadow: 2px 2px 7px #173853;
        }

        .customer-details button:hover,
        .customer-details button:active,
        .customer-details button:focus {
            color: #fff;
        }
        
        @media (max-width: 700px) {
            .customer-card {
                margin-left: 20px;
                margin-right: 20px;
            }
        }

        @media (max-width: 540px) {
            .customer-card {
                overflow: hidden;
                margin-bottom: 50px;
            }

            .customer-details {
                width: 60%;
                z-index: 1;
            }
        }

        @media (max-width: 440px) {
            .customer-details {
                width: 65%;
            }
        }

        @media (max-width: 365px) {
            .customer-details {
                width: 80%;
                position: relative;
                color: #333;
                background-color: rgba(255, 255, 255, 0.7);
            }
        }
    </style>

    <div class="customer-card">
        <div class="customer-details">
            <div id="EditScaleAlert"></div>
            <label class="title">Customer Points</label><br><br><br>
            <div class="col-md-6 phone">
                <label class="cust_phone"><?php echo CommonLanguage::getMessage('customer_phone') ?> <span class="red-star">*</span></label>
                <br>
                <input required id="customer_phone" name="customer_phone" class="form-control customer_phone" type="text" />
            </div>
            <br>
            <h3 id="not_found"></h3>
            <h3 id="points"></h3>
            <h2 id="apoints"></h2>
            <h3 id="date"></h3>
            <h2 id="adate"></h2>
            <h2 id="desc"></h2>
            <div class="modal-footer">
                <button class="btn btn-primary" id="SubmitEntry"> <?php print CommonLanguage::getMessage('Save'); ?> </button>
            </div>
        </div>
    </div>

    <script src="Theme/plugins/pace/pace.min.js" type="text/javascript"></script>
    <script src="Theme/plugins/modernizr.custom.js" type="text/javascript"></script>
    <script src="Theme/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="Theme/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="Theme/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
    <script type="text/javascript" src="Theme/plugins/bootstrap-select2/select2.min.js"></script>
    <script src="Theme/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Theme/js/pages.min.js"></script>

    <script>
        var Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('required_customer_phone_fields')); ?>;
        $(function() {
            $("#SubmitEntry").on("click", function() {
                if ($("#customer_phone").val() == '') {
                    $("#EditScaleAlert").attr("class", "alert alert-danger").show().html(Required_Fields);
                    return false;
                }
                
                var phone = $('#customer_phone').val();
                $.ajax({
                    url: "customer_points_page/get_customer_points_from_phone",
                    method: 'GET',
                    data: {
                        phone: phone
                    },
                    dataType: 'json',
                    complete: function(v1, v2) {
                        var Data = v1.responseJSON;
                        console.log('Data')
                        console.log(Data)
                        if($('#customer_phone').val() != Data['Customer_Mobile'] && $('#customer_phone').val() != Data['Customer_Phone'] && $('#customer_phone').val() != Data['Customer_Work_Phone']){
                            $("#not_found").text('customer phone not found');
                            $("#points").text('');
                            $("#apoints").text('');
                            $("#date").text('');
                            $("#adate").text('');
                            $("#desc").text('');
                        }else{
                            $("#not_found").text('');
                            $("#points").text('Collected points: ');
                            $("#apoints").text(Data['collected_points']);
                            $("#date").text('Start collecting points date: ');
                            $("#adate").text(Data['date_collected_point']);
                            $("#desc").text(Data['description']);
                        }
                    }   
                })
            })
        })
    </script>

</body>

</html>