// js/models/user.js
/////////////////////////////////////////

import Backbone from 'backbone';


const User = Backbone.Model.extend({
    urlRoot: '/users',
    defaults: {
        terms: false
    },
    validation: {
        firstname: {
            required: true
        },
        email: {
            required: true,
            pattern: 'email'
        },
        password: {
            minLength: 8
        },
        // repeatPassword: {
        //     equalTo: 'password',
        //     msg: 'The passwords does not match'
        // },
        age: {
            required: false,
            range: [18, 100]
        },
        terms: {
            acceptance: true
        }
    }
});

export default User;

// js/templates/editUser.html
/////////////////////////////////////////
<script type="text/template" id="edit-user-template">
    <div class="edit-user-container">
        <form class="edit-user-form" novalidate>
            <legend class="formHeading"><%= user ? 'Edit' : 'New' %> User</legend>
            <div class="form-group">
                <label class="inputTitle">First Name</label>
                <input class='input-line full-width' name="firstname" type="text" value="<%= user ? user.get('firstname') : '' %>">
                <span class="help-block" />
            </div>
            <div class="form-group">
                <label class="inputTitle">Last Name</label>
                <input class='input-line full-width' name="lastname" type="text" value="<%= user ? user.get('lastname') : '' %>">
                <span class="help-block" />
            </div>
            <div class="form-group">
                <label class="inputTitle">Age</label>
                <input class='input-line full-width' name="age" type="text" value="<%= user ? user.get('age') : '' %>">
                <span class="help-block" />
            </div>
            <div class="form-group">
                <label class="inputTitle">Email</label>
                <input class='input-line full-width' id="email" name="email" type="text" value="<%= user ? user.get('email') : '' %>">
                <span class="help-block" />
            </div>
            <div class="form-group">
                <label class="inputTitle">Password</label>
                <input class='input-line full-width' name="password" type="password" value="<%= user ? user.get('password') : '' %>">
                <span class="help-block" />
            </div>
            <!--<input type="checkbox" id="c1" name="cc" />-->
            <!--<label for="c1"><span></span>I accept the terms of service</label>-->
            <div class="form-group">
                <div class="editor-field">
                    <% if(!user) { %>
                    <input type="checkbox" id="c1" name="terms" value="true"/>
                    <label for="c1"><span></span>I accept the terms of service</label>
                    <% } else { %>
                    <span></span>
                    <% } %>
                </div>
                <span class="help-block" />
            </div>
            <div class="buttonsBlock">
                <button type="submit" id="submit" class="createUpdateButton"><%= user ? 'Update' : 'Create' %></button>
                <% if(user) { %>
                <input type="hidden" name="id" value="<%= user.id %>" />
                <button data-user-id="<%= user.id %>" class="deleteButton">Delete</button>
            </div>
            <% }; %>
        </form>
    </div>
</script>

// js/views/editUser.js
/////////////////////////////////////////

import router from '../routers/router';
import User from '../models/user';
import $ from 'jquery';


$.fn.serializeObject = function() {
    const o = {};
    const a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

define([
    'jquery',
    'underscore',
    'backbone',
    'text!templates/editUser.html'
], ($, _, Backbone, editUserTemplate) => {
    'use strict';

    return Backbone.View.extend({
        el: '.page',
        model: new User(),
        events: {
            'submit .edit-user-form': function(e) {
                e.preventDefault();
                this.saveUser(e);
            },
            'click .delete': 'deleteUser'
        },

        saveUser(ev) {
            const userDetails = $(ev.currentTarget).serializeObject();
            this.model.set(userDetails);
            if(this.model.isValid(true)){
                alert('Great Success!');
                this.model.save(userDetails, {
                    success: function () {
                        router.navigate('', { trigger:true });
                    }
                });
            }
            return false;
        },

        deleteUser() {
            this.user.destroy({
                success: function () {
                    console.log('destroyed');
                    router.navigate('', { trigger:true });
                }
            });
            return false;
        },

        render(options) {
            Backbone.Validation.bind(this);
            if (options.id) {
                this.user = new User({ id: options.id });
                this.user.fetch({
                    success: function (user) {
                        const template = _.template($(editUserTemplate).html())({ user: user });
                        $('.page').html(template);
                    }
                })
            } else {
                const template = _.template($(editUserTemplate).html())({ user: null });
                $('.page').html(template);
            }
        }
    });
});

// js/main.js
/////////////////////////////////////////

import 'es5-shim';
import Backbone from 'backbone';
import 'backbone-validation';
import $ from 'jquery';
import Router from './routers/router';
import '../styles/main.scss';

_.extend(Backbone.Validation.callbacks, {
    valid: function (view, attr, selector) {
        var $el = view.$('[name=' + attr + ']'),
            $group = $el.closest('.form-group');

        $group.removeClass('has-error');
        $group.find('.help-block').html('').addClass('hidden');
    },
    invalid: function (view, attr, error, selector) {
        var $el = view.$('[name=' + attr + ']'),
            $group = $el.closest('.form-group');
        $group.addClass('has-error');
        $group.find('.help-block').html(error).removeClass('hidden');
    }
});
_.extend(Backbone.Model.prototype, Backbone.Validation.mixin);

$.ajaxPrefilter((options) => {
    options.url = 'http://demo2157898.mockable.io' + options.url;
});

new Router();

Backbone.history.start();


// styles/editUserForm.scss
/////////////////////////////////////////

.edit-user-container {
  display: flex;
  justify-content: center;
}

.edit-user-form {
  display: flex;
  justify-content: center;
  height: 100%;
  flex-flow: column;
  z-index: 5;
  width: 60%;
}

input {
  border: none;
}

.input-line:focus {
  outline: none;
  border-color: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.input-line {
  background: none;
  margin-bottom: 10px;
  line-height: 2.4em;
  color: #191818;
  font-weight: 300;
  letter-spacing: 0.02rem;
  font-size: 1rem;
  border-bottom: 1px solid rgba(52, 52, 52, 0.65);
  transition: all .2s ease;
  padding: 10px;
}

.inputTitle {
  color: #484848;
  font-size: 1.2rem;
  transition: all .2s ease;
  margin: 10px;
}

.full-width {
  width: 100%;
}

.input-fields {
  margin-top: 25px;
}

legend {
  margin-bottom: 30px;
  color: #555;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

// checkbox

input[type="checkbox"] {
  display:none;
}

input[type="checkbox"] + label {
  color: #484848;
  margin: 15px 0;
}

input[type="checkbox"] + label span {
  display:inline-block;
  width:19px;
  height:19px;
  margin:-2px 10px 0 0;
  vertical-align:middle;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) left top no-repeat;
  cursor:pointer;
}

input[type="checkbox"]:checked + label span {
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -19px top no-repeat;
}

@media screen and (max-device-width: 400px) {
  .edit-user-form {
    width: 80%;
  }
}
.help-block {
  color: red;
}