@extends('layout.admin.main')
@push('css')
    <style>

        .center input, .center button {
            width: 50%;
            margin: 20px auto;
            font-size: 100%;
            text-align: center;
            padding: 10px;
        }

        div.btn button {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0;
            width: 50%;
            cursor: pointer;

        }

        div.btn {
            display: block;
        }

        input[type="text"]:disabled {
            background: #dddddd;
        }

        .apollo-field-switcher label:after{
            display: none;
        }

        .apollo-field-switcher label {
            display: block;
            float: left;
            cursor: pointer;
            position: relative;
            width: 62px;
            height: 26px;
            padding: 0;
            margin: 0;
            overflow: hidden;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
        }
        .apollo-field-switcher label input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        input[type=radio], input[type=checkbox] {
            border: 1px solid #b4b9be;
            background: #fff;
            color: #555;
            clear: none;
            cursor: pointer;
            display: inline-block;
            line-height: 0;
            height: 16px;
            margin: -4px 4px 0 0;
            outline: 0;
            padding: 0!important;
            text-align: center;
            vertical-align: middle;
            width: 16px;
            min-width: 16px;
            -webkit-appearance: none;
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
            box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
            -webkit-transition: .05s border-color ease-in-out;
            transition: .05s border-color ease-in-out;
        }
        .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
            font-family: Verdana,Arial,sans-serif;
            font-size: 1em;
        }
        .apollo-field-switcher input[type=radio],
        .apollo-field-switcher input[type=checkbox] {
            border: 1px solid #b4b9be;
            background: #fff;
            color: #555;
            clear: none;
            cursor: pointer;
            display: inline-block;
            line-height: 0;
            height: 16px;
            margin: -4px 4px 0 0;
            outline: 0;
            padding: 0!important;
            text-align: center;
            vertical-align: middle;
            width: 16px;
            min-width: 16px;
            -webkit-appearance: none;
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
            box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
            -webkit-transition: .05s border-color ease-in-out;
            transition: .05s border-color ease-in-out;
        }
        .apollo-field-switcher label em {
            position: relative;
            display: block;
            height: inherit;
            font-size: 11px;
            line-height: 26px;
            font-weight: 500;
            font-style: normal;
            text-transform: uppercase;
            color: #fff;
            background-color: #ed6f6f;
            -moz-transition: background 0.15s ease-out;
            -o-transition: background 0.15s ease-out;
            -webkit-transition: background 0.15s ease-out;
            transition: background 0.15s ease-out;
        }

        .apollo-field-switcher label em:before {
            content: attr(data-off);
            right: 14px;
        }
        .apollo-field-switcher label em:before, .apollo-field-switcher label em:after {
            position: absolute;
            -moz-transition: opacity 0.15s ease-out;
            -o-transition: opacity 0.15s ease-out;
            -webkit-transition: opacity 0.15s ease-out;
            transition: opacity 0.15s ease-out;
        }
        .apollo-field-switcher label em:after {
            content: attr(data-on);
            left: 14px;
            opacity: 0;
        }
        .apollo-field-switcher label em:before, .apollo-field-switcher label em:after {
            position: absolute;
            -moz-transition: opacity 0.15s ease-out;
            -o-transition: opacity 0.15s ease-out;
            -webkit-transition: opacity 0.15s ease-out;
            transition: opacity 0.15s ease-out;
        }
        .apollo-field-switcher label span {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 18px;
            height: 18px;
            background-color: #fff;
            -moz-border-radius: 16px;
            -webkit-border-radius: 16px;
            border-radius: 16px;
            -moz-transition: left 0.15s ease-out;
            -o-transition: left 0.15s ease-out;
            -webkit-transition: left 0.15s ease-out;
            transition: left 0.15s ease-out;
        }
        .apollo-field-switcher label input:checked ~ em:before {
            opacity: 0;
        }
        .apollo-field-switcher label em:before {
            content: attr(data-off);
            right: 14px;
        }
        .apollo-field-switcher label em:before, .apollo-field-switcher label em:after {
            position: absolute;
            -moz-transition: opacity 0.15s ease-out;
            -o-transition: opacity 0.15s ease-out;
            -webkit-transition: opacity 0.15s ease-out;
            transition: opacity 0.15s ease-out;
        }
        .apollo-field-switcher label input:checked ~ em:after {
            opacity: 1;
        }
        .apollo-field-switcher label em:after {
            content: attr(data-on);
            left: 14px;
            opacity: 0;
        }
        .apollo-field-switcher label input:checked ~ em {
            background: #4fb845;
        }
        .apollo-field-switcher label input:checked ~ span {
            left: 40px;
        }
        .apollo-field-switcher label em:before,
        .apollo-field-switcher label em:after {
            position: absolute;
            -moz-transition: opacity 0.15s ease-out;
            -o-transition: opacity 0.15s ease-out;
            -webkit-transition: opacity 0.15s ease-out;
            transition: opacity 0.15s ease-out;
        }

        .apollo-field-switcher input[type=checkbox]:checked:before {
            content: "\f147";
            margin: -3px 0 0 -4px;
            color: #1e8cbe;
        }
        .apollo-field-switcher input[type=radio]:checked:before,
        .apollo-field-switcher input[type=checkbox]:checked:before {
            float: left;
            display: inline-block;
            vertical-align: middle;
            width: 16px;
            font: 400 21px/1 dashicons;
            speak: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

    </style>
@endpush
@section('content')
    <article class="sub">
        <section class="masteredit">
            <h2>管理者情報登録</h2>
            <h3>情報入力</h3>
            <form action="" id="change-form" method="post" enctype="multipart/form-data">
                {{csrf_field()}}
                <input type="hidden" value="{{!empty($listUser) ? $listUser->id : 0}}" name="id">
                <dl class="rowform">
                    <dt>氏名</dt>
                    <dd>
                        <input type="text" disabled name="" value="{{!empty($listUser) ? $listUser->username : ''}}">
                        <span class="errors" id="user_name"></span>
                    </dd>
                    <dt>メールアドレス</dt>
                    <dd>
                        <input type="text" disabled name="" value="{{!empty($listUser) ? $listUser->email : ''}}">
                        <span class="errors" id="user_mail"></span>
                    </dd>
                    <dt>Max BOT</dt>
                    <dd>
                        <input type="number" name="user_max_bot" value="{{!empty($listUser) ? $listUser->max_bot : 0}}">
                        <span class="errors" id="user_max_bot"></span>
                    </dd>

                    <dt>アフィリエイト許可</dt>
                    <dd class="apollo-element apollo-element-active apollo-field-switcher">
                        <label>
                            <input type="checkbox" name="allow_accept_aff" value="1" data-depend-id="active" data-atts="active"
                                   @if(!empty($listUser) && $listUser->allow_accept_aff == 1) checked @endif>
                            <em data-on="on" data-off="off"></em><span></span>
                        </label>
                    </dd>

                </dl>
                <div class="btn center">
                    <button type="submit" id="submit-form" form="change-form">完了</button>
                </div>
            </form>
        </section>
    </article>
@endsection
@push('script')
    <script>
        $('#change-form').submit(function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                url: '/admin/edit-account',
                method: 'post',
                data: formData,
                'headers': {'X-CSRF-Token': $('meta[name="csrf_token"]').attr('content')},
                processData: false,
                contentType: false,
                beforeSend: function () {

                },
                success: function (response) {
                    if (response.success) {
                        location.href = '/admin/account-management';
                    } else {
                        $.each(response.errors, function (k, v) {
                            $("dd").find('.errors#' + k).text(v[0]);
                        })

                        if(response.message){
                            alert(response.message);
                        }
                    }
                },
                error: function () {

                }
            });
        });

    </script>
    <script type="text/javascript">

    </script>
@endpush