<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="csrf-token" content="4Ioj2AEqS1JtmGTsgsFWqs4XDAlg2ox4I30rbETA">
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE STYLES -->
    <!-- END PAGE STYLES -->
    <!-- BEGIN THEME STYLES -->
    <!-- 不清楚為何 明明系統底下已有同樣的css卻沒有效果 要引用外部連結才行 （星星評分效果）-->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <link href="<?php echo e(asset('assets/global/plugins/bootstrap/css/bootstrap.css')); ?>"  rel="stylesheet" type="text/css"/>

    <link href="<?php echo e(asset('assets/global/css/components-md.css')); ?>" id="style_components" rel="stylesheet" type="text/css"/>
    <link href="<?php echo e(asset('assets/global/plugins/font-awesome/css/font-awesome.min.css')); ?>" rel="stylesheet" type="text/css"/>
    <link href="<?php echo e(asset('assets/global/plugins/bootstrap/css/bootstrap.min.css')); ?>" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" href="<?php echo e(asset('assets/global/plugins/bootstrap-star-rating/css/star-rating.css')); ?>" type="text/css"/>
    <link rel="stylesheet" href="<?php echo e(asset('assets/global/plugins/bootstrap-star-rating/themes/krajee-fa/theme.css')); ?>" type="text/css"/>
    <link rel="stylesheet" href="<?php echo e(asset('assets/global/plugins/bootstrap-star-rating/themes/krajee-svg/theme.css')); ?>" type="text/css"/>
    <link rel="stylesheet" href="<?php echo e(asset('assets/global/plugins/bootstrap-star-rating/themes/krajee-uni/theme.css')); ?>" type="text/css"/>
    <script src="<?php echo e(asset('assets/global/plugins/jquery.min.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/global/plugins/bootstrap-star-rating/js/star-rating.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/global/plugins/bootstrap-star-rating/themes/krajee-fa/theme.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/global/plugins/bootstrap-star-rating/themes/krajee-svg/theme.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/global/plugins/bootstrap-star-rating/themes/krajee-uni/theme.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/global/plugins/bootstrap/js/bootstrap.min.js')); ?>" type="text/javascript"></script>
<body>
    <!-- BEGIN MODAL -->
    <div id="modal" class="modal fade bs-modal-md" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form id="form" method="POST">
                <div class="modal-content">
                    <div class="modal-header bg-blue-soft" style="color: #fff;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">服務評比 <span id="sensor_name"></span></span></h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading" style="background-color: #DDDDDD;">
                                        <h3 class="panel-title">問題總數:<?php echo e(count($question)); ?></h3>
                                    </div>
                                     
                                    <?php $counter = 0; ?>
                                   
                                    <?php foreach($question as $one): ?>
                                     
                                    <?php $counter++;?>
                                    
                                    <div class="panel-heading" style="background-color: white;">
                                        <h3 class="panel-title">問題<?php echo e($counter); ?>: <?php echo e($one->description); ?></h3><br>
                                        <div class="panel-heading form-group">
                                            <h1 class="panel-title">對於本次服務請給於評分，5分為最高分</h1><br>
                                            <table>
                                                <tr>
                                                    <td>
                                                        
                                                    </td>
                                                    <td style="text-align: center;">
                                                        1
                                                    </td>
                                                    <td style="text-align: center;">
                                                        2
                                                    </td>
                                                    <td style="text-align: center;">
                                                        3
                                                    </td>
                                                    <td style="text-align: center;">
                                                        4
                                                    </td>
                                                    <td style="text-align: center;">
                                                        5
                                                    </td>
                                                    <td>
                                                        
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td style="font-size: 8px;width: 10%" style="text-align: center;">
                                                       非常不滿意 
                                                    </td>
                                                    <td style="width: 15%;">
                                                        <input type="radio" name="satisfaction[<?php echo e($counter); ?>]" class="circular" value="1" style="width: 100%;height: 2em;">
                                                    </td>
                                                    <td style="width: 15%;">
                                                        <input type="radio" name="satisfaction[<?php echo e($counter); ?>]" value="2" style="width: 100%;height: 2em;">
                                                    </td>
                                                    <td style="width: 15%;">
                                                        <input type="radio" name="satisfaction[<?php echo e($counter); ?>]" value="3" style="width: 100%;height: 2em;">
                                                    </td>
                                                    <td style="width: 15%;">
                                                        <input type="radio" name="satisfaction[<?php echo e($counter); ?>]" value="4" style="width: 100%;height: 2em;">
                                                    </td>
                                                    <td style="width: 15%;">
                                                        <input type="radio" name="satisfaction[<?php echo e($counter); ?>]" value="5" style="width: 100%;height: 2em;"><br>
                                        
                                                    </td>
                                                    <td style="font-size: 8px;width: 10%" style="text-align: center;">
                                                        非常滿意
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <h3>總體滿意度:</h3><br>
                            <input id="satisfaction" name="satisfaction" class="rating" title="" data-min="0" data-max="5" data-step=1 data-show-clear="false" data-show-caption="false" data-size="sm"/> 
                        </div>
                        
                        <div class="row col-md-12">
                            <div class="col-md-12">
                                <label style="font-size: 8vw;">留言</label><br>
                                <textarea id="message" name="message" style="width: 100%;overflow: auto;resize:none;" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                    <div style="height: 15vh;">
                        <input type="hidden" id="fault_handle_id" name="fault_handle_id" value="">
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="mode" name="mode">
                        <input type="hidden" id="fault_report_id" name="fault_report_id" value="<?php echo e($fault_report->id); ?>">
                        <input type="hidden" id="ans" name="ans">
                        <button id="send" type="button" class="btn btn-primary btn-lg btn-block">送出</button>
                    </div>
                </div>
            </form>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- END MODAL -->


    <table width="100%">
        <?php foreach($keys as $key => $value): ?>
            <?php if($keys[$key] == 'user_id'): ?>
                <tr>
                    <td style="background-color:#DAEDDA;width:15%;" nowrap><?php echo e($names[$key]); ?></td>
                    <td style="background-color:#F0F7EF;width:35%;"> <?php echo e($fault_report->name); ?></td>
                </tr>
            <?php else: ?>
                <tr>
                    <td style="background-color:#DAEDDA;width:15%;" nowrap><?php echo e($names[$key]); ?></td>
                    <td style="background-color:#F0F7EF;width:35%;"> <?php echo e($fault_report->$value); ?></td>
                </tr>
            <?php endif; ?>
        <?php endforeach; ?>
    </table>
    <br>
    <br>
    處理前
    <br>
    <table border="1" bordercolor="#dcdcde" style="border-collapse:collapse; width:100%; margin-top:5px;text-align: center;">
        <tr>
            <td bgcolor="#eef7fe" colspan="5"><strong>點擊圖片放大</strong>
            </td>
        </tr>
        <tr>
            <td style="width:19.5vw;">
                <a href="<?php echo e($fault_report->image1); ?>" class="lighta">
                    <img src="<?php echo e($fault_report->image1); ?>" alt="" style="width:19vw;"/>
                </a>
            </td>
            <td style="width:19.5vw;">
                <a href="<?php echo e($fault_report->image2); ?>" class="lighta">
                    <img src="<?php echo e($fault_report->image2); ?>" alt="" style="width:19vw;"/>
                </a>
            </td>
            <td style="width:19.5vw;">
                <a href="<?php echo e($fault_report->image3); ?>" class="lighta">
                    <img src="<?php echo e($fault_report->image3); ?>" alt="" style="width:19vw;"/>
                </a>
            </td>
            <td style="width:19.5vw;">
                <a href="<?php echo e($fault_report->image4); ?>" class="lighta">
                    <img src="<?php echo e($fault_report->image4); ?>" alt="" style="width:19vw;"/>
                </a>
            </td>
            <td style="width:19.5vw;">
                <a href="<?php echo e($fault_report->image5); ?>" class="lighta">
                    <img src="<?php echo e($fault_report->image5); ?>" alt="" style="width:19vw;"/>
                </a>
            </td>
        </tr>
    </table>
    <br>
    <br>
    處理後
    <br>
    <br>
    <?php foreach($fault_handles as $value): ?>
        處理現況(<?php echo e($value->created_at); ?>)：
        <?php if($value->status_change==0): ?>
            未處理<br>
        <?php elseif($value->status_change==1): ?>
            處理中<br>
        <?php else: ?>
            已處理<br>
        <?php endif; ?>
        處理者：<?php echo e($value->name); ?>

        <?php if( $value->satisfaction != ""): ?>
            <input id="rating-input" class="rating" value="<?php echo e($value->satisfaction); ?>" data-min="0" data-max="5" data-step=1 data-show-clear="false" data-show-caption="false" data-size="sm" disabled="true" />
        <?php else: ?>
            <button class="questionn btn btn-primary btn-sm" data-id="<?php echo e($value->id); ?>">評比問卷</button>
        <?php endif; ?>
        <br>
        簡述：<?php echo e($value->content); ?><br><br>

        <?php if($display): ?>
        <table border="1" bordercolor="#dcdcde" style="border-collapse:collapse; width:100%; margin-top:5px;text-align: center;">
            <tr>
                <td bgcolor="#eef7fe" colspan="5">
                    <strong>點擊圖片放大</strong>
                </td>
            </tr>
            <tr>
                <td style="width: 19.5vw;">
                    <a href="<?php echo e($value->image1); ?>" class="lighta">
                        <img src="<?php echo e($value->image1); ?>" alt="" style="width:19vw">
                    </a>
                </td>
                <td style="width: 19.5vw;">
                    <a href="<?php echo e($value->image2); ?>" class="lighta">
                        <img src="<?php echo e($value->image2); ?>" alt="" style="width:19vw">
                    </a>
                </td>
                <td style="width: 19.5vw;">
                    <a href="<?php echo e($value->image3); ?>" class="lighta">
                        <img src="<?php echo e($value->image3); ?>" alt="" style="width:19vw">
                    </a>
                </td>
                <td style="width: 19.5vw;">
                    <a href="<?php echo e($value->image4); ?>" class="lighta">
                        <img src="<?php echo e($value->image4); ?>" alt="" style="width:19vw">
                    </a>
                </td>
                <td style="width: 19.5vw;">
                    <a href="<?php echo e($value->image5); ?>" class="lighta">
                        <img src="<?php echo e($value->image5); ?>" alt="" style="width:19vw">
                    </a>
                </td>
            </tr>
        </table>
        <br>
        <?php endif; ?>
        
    <?php endforeach; ?>

</body>

<script type="text/javascript">
    $(document).ready(function(){

        $(document).on("click",'.questionn',function(){
            $("#fault_handle_id").val($(this).attr("data-id"));
            $('#modal').modal('show');
        });

        $("#send").on("click",function(){
            if("<?php echo e($place); ?>" == "inside"){
                var form = $('#form');
                form.attr("action", '<?php echo e(route("mobile::RepairService")); ?>');
                $("#mode").val("postQuestionnaires_fault");
                var ans = "";
                for (var i = 1; i <= 10; i++) {
                    ans = ans+$('input[name="satisfaction['+i+']"]:checked').val()+",";
                }
                $("#ans").val(ans);
                form[0].submit();
            }else{
                var form = $('#form');
                form.attr("action", '<?php echo e(route("mobile::RepairService")); ?>');
                $("#mode").val("postQuestionnaires_fault_outside");
                var ans = "";
                for (var i = 1; i <= 10; i++) {
                    ans = ans+$('input[name="satisfaction['+i+']"]:checked').val()+",";
                }
                $("#ans").val(ans);
                form[0].submit();
            }
            
        });
    });
</script>

</html>
