@extends('templates.'. $template_name .'.layouts.default')

@section('title', trans('message.my_profile'))

@section('content')

    <div class="main-content shop-page login-page" style="padding-bottom: 20px">
        <div class="container">
            <div class="breadcrumbs">
                <a href="{!! url('/')!!}">{{trans('message.home')}}</a> \ <span
                        class="current"> {{trans('message.my_profile')}}</span>
            </div>

            <!-- session flash message -->
            {!! getFlashMessage() !!}
            {!! Form::open(['url' => url('/api-save-profile'), 'method' => 'POST']) !!}

            <div class="login-register-form content-form row">
                <div class="login-form">
                    <h4 class="main-title">{{trans('message.personal_information')}}</h4>

                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <span class="label-text">{{trans('message.name')}}</span>
                        <input type="text" class="input-info" name="name" value="{{$user_obj->name}}">
                        <span class="label-text">{{trans('message.email')}}</span>
                        <input type="email" class="input-info" name="email" value="{{$user_obj->email}}">
                    </div>

                                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <span class="label-text">{{trans('message.gender')}}</span>
                        <select name="gender" class="form-control">
                            <option value="M" {{$selected_male}}>{{ucfirst(trans('male'))}}</option>
                            <option value="F" {{$selected_female}}>{{ucfirst(trans('female'))}}</option>
                        </select>
                        <br>

                        <span class="label-text">{{trans('message.phone_number')}}</span>
                        <input type="text" class="input-info" value="{{$user_obj->phone}}" readonly="readonly">
                    </div>

                    <h4 class="main-title">{{trans('message.sign_in_information')}}</h4>
                    <div class="alert alert-danger no-border div-error personal-information-box">
                        <a class="close" data-dismiss="alert">×</a>
                        <i class="icon-warning"></i> <strong>{{trans('message.error')}} </strong>
                        {{trans('message.password_does_not_match')}}
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <span class="label-text">{{trans('message.new_password')}}</span>
                        <input type="password" class="input-info" name="password" id="password">
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <span class="label-text">{{trans('message.confirm_password')}}</span>
                        <input type="password" id="confirm-password" class="input-info" name="confirm-password">

                        <div class="group-button">
                            <button class="button submit pull-right" id="btn-submit" style="border: 0;">
                                {{trans('message.save')}}</button>
                        </div>
                    </div>
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        $(function () {

            var div_error = $('div.div-error');
            div_error.hide();

            // code here
            $('#btn-submit').click(function (e) {
                e.preventDefault();
                var me = $(this);
                var password = $('#password').val(),
                    confirm_password = $('#confirm-password').val(),
                    form = me.closest('form');
                if ((password != '') && (password != confirm_password)) {
                    div_error.show();
                } else {
                    div_error.hide();
                    form.submit();
                }
            });
        });
    </script>
@endsection