@extends('layouts.app')

@section('head')

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" media="screen and (max-width:1920px)" href="{{ URL::asset('css/tv.css') }}" type="text/css" />-->
<link rel="stylesheet" href="{{ URL::asset('css/index.css') }}" type="text/css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    * {
        box-sizing: border-box;
    }

    .row:after {
        content: "";
        clear: both;
        display: block;
    }

    [class*="col-"] {
        float: left;
        padding: 5px;
    }

    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }

    .ui-dialog .ui-dialog-title {
        font-size: 16px;
    }

    .td_title {
        font-size: 16px;
        width: 140px;
    }

    td.pass input[type=password] {
        font-size: 16px;
        width: 120px;
    }

    tr.dialogTR {
        margin-bottom: 10px;
    }

    .ui-dialog .ui-dialog-buttonpane button {
        font-size: 16px;
    }

    .errMsg {
        font-size: 16px
    }
</style>

@endsection

@section('header')
<img src="{{ URL::asset('images/conductor.png') }}">
@endsection

@section('content')
<div class="row" style='padding-bottom: 30px;'>
    <div class='col-12'>
        <div class='col-4'>
            <div id="pink">
                <a onclick="window.location='{{ url('auth/notification') }}'">
                    <div class="menuimg">
                        <img src="{{ URL::asset('images/menu/01.png') }}">
                    </div>
                    訊息通知
                </a>
            </div>
        </div>
        <div class='col-4'>
            <div id="green">
                <a onclick="window.location='{{ url('auth/proclamation') }}'">
                    <div class="menuimg">
                        <img src="{{ URL::asset('images/menu/02.png') }}">
                    </div>
                    社區公告
                </a>
            </div>
        </div>
        <div class='col-4'>
            <div id="pink">
                <a onclick="window.location='{{ url('auth/reservation') }}'">
                    <div class="menuimg">
                        <img src="{{ URL::asset('images/menu/03.png') }}">
                    </div>
                    公設預約
                </a>
            </div>
        </div>
        <div class='col-4'>
            <div id="green"><a onclick="window.location='{{ url('auth/inform') }}'">
                    <div class="menuimg"><img src="{{ URL::asset('images/menu/04.png') }}"></div>
                    修繕通報</a></div>
        </div>
        <div class='col-4'>
            <div id="purple"><a onclick="window.location='{{ url('auth/votes') }}'">
                    <div class="menuimg"><img src="{{ URL::asset('images/menu/05.png') }}"></div>
                    線上投票</a></div>
        </div>
        <div class='col-4'>
            <div id="blue"><a onclick="window.location='{{ url('auth/feeback') }}'">
                    <div class="menuimg"><img src="{{ URL::asset('images/menu/06.png') }}"></div>
                    意見反應</a></div>
        </div>
        <div class='col-4'>
            <div id="blue"><a onclick="window.location='{{ url('auth/agendarecord') }}'">
                    <div class="menuimg"><img src="{{ URL::asset('images/menu/07.png') }}"></div>
                    會議紀錄</a></div>
        </div>
        <div class='col-4'>
            <div id="pink"><a onclick="window.location='{{ url('auth/registrationbook') }}'">
                    <div class="menuimg"><img src="{{ URL::asset('images/menu/08.png') }}"></div>
                    委員名冊</a></div>
        </div>
        <div class='col-4'>
            <div id="green"><a onclick="window.location='{{ url('auth/regulations') }}'">
                    <div class="menuimg"><img src="{{ URL::asset('images/menu/09.png') }}"></div>
                    住戶規約</a></div>
        </div>
        <div class='col-4'>
            <div id="purple"><a onclick="window.location='{{ url('auth/search') }}'">
                    <div class="menuimg"><img src="{{ URL::asset('images/menu/10.png') }}"></div>
                    記錄查詢</a></div>
        </div>
        <div class='col-4'>
            <div id="green"><a onclick="window.location='{{ url('auth/lifeinfo') }}'">
                    <div class="menuimg"><img src="{{ URL::asset('images/menu/11.png') }}"></div>
                    生活資訊</a></div>
        </div>
        <div class='col-4'>
            <div id="blue">
                <a onclick="window.location='{{ url('auth/designatedshops') }}'">
                    <div class="menuimg">
                        <img src="{{ URL::asset('images/menu/12.png') }}">
                    </div>
                    特約商店
                </a>
            </div>
        </div>
        <!-- Added By Aber Lu at 2018/05/02 增加修改密碼 !-->
        <div class='col-4'>
            <div id="blue" style="font-size:14px;text-shadow: -1px -1px 1px #000;padding:5px;border-radius:5px;">
                <a id="modifyPass">修改密碼</a>
            </div>
        </div>
    </div>
</div>


<!-- Added By Aber Lu at 2018/05/02 增加修改密碼 !-->
<div id="dialogModiPass" title="修改密碼">
    <form>
        {{ csrf_field() }}
        <table>
            <tr class="dialogTR">
                <td class="td_title">
                    輸入舊密碼：
                </td>
                <td class="pass">
                    <input id="oldPass" type="password"/>
                </td>
            </tr>
            <tr class="dialogTR">
                <td class="td_title">
                    輸入新密碼：
                </td>
                <td class="pass">
                    <input id="newPass" type="password"/>
                </td>
            </tr>
            <tr>
                <td class="td_title">
                    重複新密碼：
                </td>
                <td class="pass">
                    <input id="repeatPass" type="password"/>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dialogErrMsg" title="提示">
    <div class="errMsg">
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#dialogErrMsg").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                確定: function () {
                    $(this).dialog("close");
                }
            },
            close: function() {
                $(this).find(".errMsg").eq(0).html("");
            }
        });
        $( "#dialogModiPass" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                確定: function() {
                    var token = $(this).find('input[name="_token"]').val();
                    var oldPass = $("#oldPass").val();
                    var newPass = $("#newPass").val();
                    var repeatPass = $("#repeatPass").val();

                    if ($.trim(oldPass) === "" ||
                        $.trim(newPass) === "" ||
                        $.trim(repeatPass) === "") {
                        $("#dialogErrMsg").find(".errMsg").eq(0).html("請填妥所有資料");
                        $(this).dialog("close");
                        $("#dialogErrMsg").dialog("open");
                        return;
                    }

                    if (newPass !== repeatPass) {
                        $("#dialogErrMsg").find(".errMsg").eq(0).html("新密碼與重複新密碼不相等");
                        $(this).dialog("close");
                        $("#dialogErrMsg").dialog("open");
                        return;
                    }

                    $.ajax({
                        type: "POST",
                        url: "{{url('auth/modipass')}}",
                        dataType: "json",
                        data: {
                            _token: token,
                            oldPass: oldPass,
                            newPass: newPass,
                        },
                        success: function(data) {
                            if (typeof data !== typeof undefined &&
                                typeof data.success !== typeof undefined &&
                                typeof data.msg !== typeof undefined &&
                                $.trim(data.msg) !== "") {
                                $("#dialogErrMsg").find(".errMsg").eq(0).html(data.msg);
                                $("#dialogModiPass").dialog("close");
                                $("#dialogErrMsg").dialog("open");
                                return;
                            } else {
                                $("#dialogModiPass").dialog("close");
                            }
                        }
                    }).fail(function(a, b, c) {
                        console.log(a, b, c);
                        $("#dialogModiPass").dialog("close");
                    });
                },
                取消: function() {
                    $(this).dialog("close");
                }
            },
            close: function() {
                $("#oldPass").val("");
                $("#newPass").val("");
                $("#repeatPass").val("");
            }
        });
        $("#modifyPass").on("click", function(){
            $( "#dialogModiPass" ).dialog( "open" );
        });
    });
</script>
@endsection