<?php
$requestId = $_GET["rid"];

 
?>


    <!doctype html>

    <html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Team Rating</title>
        <meta name="description" content="Team Rating">
        <meta name="author" content="Saniservice">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <style>
            @import url(http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
            * {
                margin: 0;
                padding: 0;
                font-family: roboto;
            }
            
            body {
                background: #cbcbcb;
            }
            
            .cont {
                width: 93%;
                max-width: 350px;
                text-align: center;
                margin: 4% auto;
                padding: 30px 0;
                background: #fafafa;
                color: #EEE;
                border-radius: 5px;
                /*border: thin solid #444;*/
                overflow: hidden;
            }
            
            hr {
                margin: 20px;
                border: none;
                border-bottom: thin solid rgba(255, 255, 255, .1);
            }
            
            div.title {
                font-size: 2em;
            }
            
            h1 span {
                font-weight: 300;
                color: #Fd4;
            }
            
            div.stars {
                width: 270px;
                display: inline-block;
            }
            
            input.star {
                display: none;
            }
            
            label.star {
                float: right;
                padding: 10px;
                font-size: 28px;
                color: #ffffff;
                transition: all .2s;
            }
            
            input.star:checked~label.star:before {
                content: '\f005';
                color: #FD4;
                transition: all .25s;
            }
            
            input.star-5:checked~label.star:before {
                color: #FE7;
                text-shadow: 0 0 20px #952;
            }
            
            input.star-1:checked~label.star:before {
                color: #F62;
            }
            
            label.star:hover {
                transform: rotate(-15deg) scale(1.3);
            }
            
            label.star:before {
                content: '\f005';
                font-family: FontAwesome;
            }
            /* entire container, keeps perspective */
            
            .card-container {}
            /* flip the pane when hovered */
            
            .card-container:not(.manual-flip):hover .card,
            .card-container.hover.manual-flip .card {}
            
            .card-container.static:hover .card,
            .card-container.static.hover .card {
                -webkit-transform: none;
                -moz-transform: none;
                -o-transform: none;
                transform: none;
            }
            /* flip speed goes here */
            
            .card {}
            /* hide back of pane during swap */
            
            .front,
            .back {
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -o-backface-visibility: hidden;
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
                background-color: #FFF;
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
            }
            /* front pane, placed above back */
            
            .front {
                z-index: 2;
            }
            /* back, initially hidden pane */
            
            .back .btn-simple {
                position: absolute;
                left: 0;
                bottom: 4px;
            }
            /*        Style       */
            
            .card {
                background: none repeat scroll 0 0 #FFFFFF;
                border-radius: 4px;
                color: #444444;
            }
            
            .card-container,
            .front,
            .back {
                width: 100%;
                border-radius: 4px;
                -webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
                -moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
                box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
            }
            
            .card .cover {
                overflow: hidden;
                border-radius: 4px 4px 0 0;
                background-color: #cbcbcb;
            }
            
            .card .cover img {
                width: 100%;
            }
            
            .card .user {
                border-radius: 50%;
                display: block;
                height: 120px;
                margin: -55px auto 0;
                overflow: hidden;
                width: 120px;
            }
            
            .card .user img {
                background: none repeat scroll 0 0 #FFFFFF;
                border: 4px solid #FFFFFF;
                width: 100%;
            }
            
            .card .content {
                background-color: rgba(0, 0, 0, 0);
                box-shadow: none;
                padding: 10px 20px 20px;
            }
            
            .card .content .main {
                min-height: 160px;
                text-align: center;
            }
            
            .card .back .content .main {
                height: 215px;
            }
            
            .card .name {
                font-family: 'Arima Madurai', cursive;
                font-size: 22px;
                line-height: 28px;
                margin: 10px 0 0;
                text-align: center;
                text-transform: capitalize;
            }
            
            .card h5 {
                margin: 5px 0;
                font-weight: 400;
                line-height: 20px;
            }
            
            .card .profession {
                color: #999999;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .card .footer {
                border-top: 1px solid #EEEEEE;
                color: #999999;
                margin: 30px 0 0;
                padding: 10px 0 0;
                text-align: center;
            }
            
            .card .footer .social-links {
                font-size: 18px;
            }
            
            .card .footer .social-links a {
                margin: 0 7px;
                color: #58585a;
            }
            
            .card .footer .btn-simple {
                margin-top: -6px;
            }
            
            .card .header {
                padding: 15px 20px;
                height: 90px;
            }
            
            .card .motto {
                font-family: 'Arima Madurai', cursive;
                border-bottom: 1px solid #EEEEEE;
                color: #999999;
                font-size: 14px;
                font-weight: 400;
                padding-bottom: 10px;
                text-align: center;
            }
            
            .card .stats-container {
                width: 100%;
                margin-top: 50px;
            }
            
            .card .stats {
                display: block;
                float: left;
                width: 33.333333%;
                text-align: center;
            }
            
            .card .stats:first-child {
                border-right: 1px solid #EEEEEE;
            }
            
            .card .stats:last-child {
                border-left: 1px solid #EEEEEE;
            }
            
            .card .stats h4 {
                font-family: 'Arima Madurai', cursive;
                font-weight: 300;
                margin-bottom: 5px;
            }
            
            .card .stats p {
                color: #777777;
            }
            /*      Just for presentation        */
            
            .title {
                color: #ea2229;
                text-align: center;
                font-weight: 300;
                font-size: 44px;
                margin-bottom: 90px;
                line-height: 90%;
            }
            
            .title small {
                font-size: 17px;
                color: #999;
                text-transform: uppercase;
                margin: 0;
            }
            
            .space-30 {
                height: 30px;
                display: block;
            }
            
            .space-50 {
                height: 50px;
                display: block;
            }
            
            .space-200 {
                height: 200px;
                display: block;
            }
            
            .white-board {
                background-color: #FFFFFF;
                min-height: 200px;
                padding: 60px 60px 20px;
            }
            
            .ct-heart {
                color: #F74933;
            }
            
            pre.prettyprint {
                background-color: #ffffff;
                border: 1px solid #999;
                margin-top: 20px;
                padding: 20px;
                text-align: left;
            }
            
            .atv,
            .str {
                color: #05AE0E;
            }
            
            .tag,
            .pln,
            .kwd {
                color: #3472F7;
            }
            
            .atn {
                color: #2C93FF;
            }
            
            .pln {
                color: #333;
            }
            
            .com {
                color: #999;
            }
            /*       Fix bug for IE      */
            
            @media screen and (-ms-high-contrast: active),
            (-ms-high-contrast: none) {
                .front,
                .back {
                    -ms-backface-visibility: visible;
                    backface-visibility: visible;
                }
                .back {
                    visibility: hidden;
                    -ms-transition: all 0.2s cubic-bezier(.92, .01, .83, .67);
                }
                .front {
                    z-index: 4;
                }
                .card-container:not(.manual-flip):hover .back,
                .card-container.manual-flip.hover .back {
                    z-index: 5;
                    visibility: visible;
                }
            }
            
            .rating-message {
                font-size: 20px;
                margin-bottom: 20px;
            }
            
            .rating-reason-label {
                font-size: 16px;
            }
            
            .radio-inline input[type=radio] {
                margin-left: -30px;
            }
        </style>

        <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
    </head>

    <body>

        <form action="http://erp.saniservice.com/api/posting/data" method="POST" name="teamRatingsForm" id="teamRatingsForm">

            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">

                        <div class="card-container">
                            <div class="card">
                                <div class="front">
                                    <div class="cover">
                                        <div style="height:100px;margin:100px 0 0 0">
                                            <div class="title" style="margin:0 0 20px 0; color:white">
                                                <h1 id="teamNameTitle">Loading...</h1>
                                            </div>
                                        </div>
                                        <!--
                                        <img src="https://www.clipartsgram.com/image/129556292-kyz84k3.jpg" />
                                        -->
                                    </div>
                                    <div class="user">
                                        <img class="img-circle" id="teamLogo" src="http://saniservice.com/tmrate/photos/default.jpg" />
                                    </div>
                                    <div style="height: 40px;background-color:#ea2229;position: relative;top: -65px;z-index: -1;"></div>
                                    <div class="content">
                                        <div class="main">



                                            <input type="hidden" name="requestId" id="referenceId" value="<?php echo $requestId;?>">
                                            <input type="hidden" name="rating" id="rating" value="">
                                            <input type="hidden" name="teamName" id="teamName" value="">

                                            
                                            <!--Start #notRatedWrapper-->
                                            <div id="notRatedWrapper">

                                                <div class="title" style="margin:0 0 20px 0; color:#636365">
                                                <h3>Rate your Sanihome Service</h3>
                                            </div>

                                            
                                                <div class="stars" style="border:solid 1px white; min-width:250px;width:250px; background-color:#ea2229;border-radius: 10px;">

                                                    <input class="star star-5 radio-star" data-value="5" id="star-5" type="radio" name="star" />
                                                    <label class="star star-5" for="star-5"></label>
                                                    <input class="star star-4 radio-star" data-value="4" id="star-4" type="radio" name="star" />
                                                    <label class="star star-4" for="star-4"></label>
                                                    <input class="star star-3 radio-star" data-value="3" id="star-3" type="radio" name="star" />
                                                    <label class="star star-3" for="star-3"></label>
                                                    <input class="star star-2 radio-star" data-value="2" id="star-2" type="radio" name="star" />
                                                    <label class="star star-2" for="star-2"></label>
                                                    <input class="star star-1 radio-star" data-value="1" id="star-1" type="radio" name="star" />
                                                    <label class="star star-1" for="star-1"></label>

                                                </div>
                                                <br>
                                                <br>
                                                <p id="rateMessage" class="rating-message"></p>


                                                <!--Start #ratingsBelowFour-->
                                                <div id="ratingsBelowFour" class="hidden" style="text-align: left; padding-left:10px">
                                                    <div class="form-group">
                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Punctuality"> Punctuality 
</label>
                                                    </div>


                                                    <div class="form-group">

                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Cleanliness"> Cleanliness 
</label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Professionalism"> Professionalism
</label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Courtesy"> Courtesy
</label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Carefulness"> Carefulness
</label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Others"> Others<br>
</label>
                                                    </div>
                                                </div>
                                                <!--End #ratingsBelowFour-->

                                                <!--Start #ratingsIsFive-->
                                                <div id="ratingsIsFive" class="hidden" style="text-align: left;  padding-left:10px">
                                                    <div class="form-group">
                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Excellent Punctuality"> Excellent Punctuality
</label>
                                                    </div>
                                                    <div class="form-group">

                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Superb Cleanliness"> Superb Cleanliness
</label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Exceptional Professionalism"> Exceptional Professionalism
</label>
                                                    </div>
                                                    <div class="form-group">

                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Outstanding Courtesy"> Outstanding Courtesy
</label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="radio-inline rating-reason-label">
  <input type="radio" name="reason" value="Exemplary Care"> Exemplary Care
</label>

                                                    </div>
                                                    <!--End #ratingsIsFive-->


                                                </div>
                                                <div class="form-group">
                                                    <br>

                                                    <textarea name="comment" id="comment" class="form-control" placeholder="Comment"></textarea>
                                                </div>
                                                <div class="form-group">

                                                    <button type="submit" class="btn btn-danger btn-lg btn-block" id="btnSubmitClientRating" data-loading-text="Processing...">Submit</button>
                                                </div>
                                            </div>
                                            <!--End notRatedWrapper-->

                                            <div id="ratedWrapper" class="hidden">

                                                <p class="rating-message">Thank you for rating us!</p>
                                            </div>




                                        </div>


                                        <div class="footer">
                                            <div class="social-links text-center">
                                                <a href="https://www.facebook.com/saniservice/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
                                                <a href="https://plus.google.com/+Saniservice-dxb" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
                                                <a href="https://twitter.com/saniservice" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
                                                <a href="https://www.instagram.com/saniservice" class="instagram"><i class="fa fa-instagram fa-fw"></i></a>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                                <!-- end front panel -->

                            </div>
                            <!-- end card -->
                        </div>
                        <!-- end card-container -->



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

        </form>



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script>
            $(function() {
                console.log($("#referenceId").val());
                var rid = $("#referenceId").val();

                $.ajax({
                    url: 'http://erp.saniservice.com/api/team/rating/' + rid,
                    type: "GET",
                    crossDomain: true,
                    cache: false,
                    success: function(data, textStatus, jqXHR) {
                        console.log(data);
                        $("#teamNameTitle").text("TEAM " + data.raw.team);
                        $("#teamName").val(data.raw.team);

                        switch (data.raw.team) {
                            case "SANJAY":
                                $("#teamLogo").attr("src", 'https://saniservice.com/tmrate/photos/sanjay.jpg');
                                break;

                            case "RANJIT":
                                $("#teamLogo").attr("src", 'https://saniservice.com/tmrate/photos/ranjit.jpg');
                                break;
                            case "VIJESH":
                                $("#teamLogo").attr("src", 'https://saniservice.com/tmrate/photos/vijesh.jpg');
                                break;
                            case "NAVEEN":
                                $("#teamLogo").attr("src", 'https://saniservice.com/tmrate/photos/naveen.jpg');
                                break;
                            default:
                                $("#teamLogo").attr("src", 'https://saniservice.com/tmrate/photos/rajeesh.jpg');
                                break;
                        }



                        if (data.status == "rated") {
                            $("#notRatedWrapper").addClass("hidden");
                            $("#ratedWrapper").removeClass("hidden");

                        } else {
                            $("#notRatedWrapper").removeClass("hidden");
                            $("#ratedWrapper").addClass("hidden");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        //if fails
                    }
                });


                var userRating = function() {
                    var thisElem = $(this);
                    var rate = thisElem.attr("data-value");

                    console.log(rate);

                    if (parseInt(rate) <= 4) {
                        $("#ratingsBelowFour").removeClass("hidden");
                        $("#ratingsIsFive").addClass("hidden");
                        $("#rateMessage").text("What can we improved?");


                    } else {
                        $("#ratingsBelowFour").addClass("hidden");
                        $("#ratingsIsFive").removeClass("hidden");
                        $("#rateMessage").text("Please leave a complementary.");
                    }

                    $("#rating").val(rate);

                    $("#isRated").val("rated");
                };

                var processClientRating = function(e) {
                    console.log('Client Rating Form Submitted');

                    var postData = $(this).serializeArray();
                    var formURL = $(this).attr("action");
                    var $btn = $("#btnSubmitClientRating").button('loading');

                    $.ajax({
                        url: formURL,
                        type: "POST",
                        data: postData,
                        cache: false,
                        success: function(data, textStatus, jqXHR) {
                            //alert(data);
                            $("#btnSubmitClientRating").attr("disabled", true);
                            if (data.transactionCode == 10) {
                                $("#notRatedWrapper").addClass("hidden");
                                $("#ratedWrapper").removeClass("hidden");
                            } else {
                                alert("An error occurred while processing transaction.")
                            }


                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            //if fails
                        }
                    });
                    //Stop from loading the page
                    return false;

                };



                $(".radio-star").on("click", userRating);
                $("#teamRatingsForm").submit(processClientRating);
            });
        </script>
    </body>

    </html>