@extends('layouts.master-voyo')
<!-- header -->
@section('header')
<link rel="stylesheet" href="{{ URL::asset('site/css/events/bootstrap-responsive.css') }}">
<link rel="stylesheet" href="{{ URL::asset('site/css/custom.css')}}">
<script>
    // Default country code to implement with jQuery intlTelInput plugin
    // Code is inside of member.js
    var default_country_code = "{{ strtolower(trim(explode('/', $member->Countries->iso_code)[0])) }}";
</script>
<style>
    .fv-form-bootstrap .fv-icon-no-label, .form-control-feedback {
        right: 10px;
    }
    .form-group.has-error .btn{
        border-color:#a94442 !important;
    }
</style>
@stop
<!-- content -->
@section('content')
<header class="titlebar titlebar1">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title pull-left page-title1">{{ trans('site.Dashboard') }}</h1>
                <ol class="breadcrumb pull-right">
                    <li><a href="{{ url('member/dashboard') }}">{{ trans('site.Dashboard') }}</a></li>
                    <li class="active">{{ trans('dashboard.Security_Setting') }}</li>
                </ol>
            </div>
        </div>
    </div>
</header>
<!-- END Page Header -->


    @include('components.userstatus',[
        'type' =>'alert-warning'
    ])

<section class="shop-section account section-4" id="security">
    <div class="container">

        <div class="alert alert-success paswordStatus" style="display: none;">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Your update is successful.
        </div>
        <div class="alert alert-danger paswordStatus" style="display: none;">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Your update has failed.
        </div>

        <div class="row mb35">
            <div class="col-sm-5 col-md-3 xs-box member_nav list-group">
                @include('member._partials.sidebar')
            </div>

            @if(session('status'))
            <div class="col-sm-7 col-md-9"> 
                <div class="alert alert-success alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    {{ session('status') }}
                </div>
            </div>
            @endif
            @if (count($errors) > 0)
            <div class="col-sm-7 col-md-9"> 
                <div class="alert alert-danger alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>           
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endif

            <div class="col-sm-7 col-md-9">
                <!-- Tab panes -->
                <div class="">
                    <div class="col-sm-12 col-md-6 sm-box">
                        <form class="form-horizontal" method="post" id="pwdUpdateForm" action="{{ action('MemberController@updatePassword') }}">
                            {!! csrf_field() !!}
                            {!! method_field('PATCH') !!}                                    
                            <h3 class="main-title">{{ trans('dashboard.Security_Setting') }}</h3>                            
                            <div class="form-group">
                                <label class="col-sm-12">
                                    {{ trans('dashboard.Current_Password') }} <span class="required">*</span> 
                                </label>
                                <div class="col-sm-12">
                                    <input type="password"  class="form-control" name="currentpassword">
                                </div>  
                            </div> 
                            <div class="form-group">
                                <label class="col-sm-12">
                                    {{ trans('dashboard.New_Password') }} <span class="required">*</span>
                                </label>
                                <div class="col-sm-12">
                                    <input type="password"  class="form-control" name="newpassword" id="newpassword">
                                </div> 
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12">
                                    {{ trans('dashboard.Confirm_New_Password') }} <span class="required">*</span>
                                </label>
                                <div class="col-sm-12">
                                    <input type="password"  class="form-control" name="newpassword_confirmation">
                                </div> 
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="submit" class="btn btn-new rounded">{{ trans('dashboard.Save_Setting') }}
                                    <span class="loader"></span>
                                    </button>
                                </div>
                            </div>
                        </form>
                        <hr/>
                        <form class="form-horizontal" method="post" id="securityForm" action="{{ action('MemberController@updateSecurityAnswer') }}" name="securityForm">
                            {!! csrf_field() !!}
                            {!! method_field('PATCH') !!}                                         
                            <div class="form-group">
                                <label class="col-sm-12">
                                    {{ trans('dashboard.Security_Question') }} <span class="required">*</span>
                                </label>
                                <div class="col-sm-12 select_style2">
                                    <select name="security_question" id="security_question" class="form-control" >
                                        <option class="disabled_color" disabled="" selected value=""> 
                                            Please select your Security Question
                                        </option>
                                        <option value="1" {{ $member->security_id=='1' ? 'selected':''}} >
                                            What is the date of your father's birthday?
                                        </option>
                                        <option value="2"  {{ $member->security_id=='2' ? 'selected':''}} >
                                            What is the date of your mother's birthday?
                                        </option>
                                        <option value="3" {{ $member->security_id=='3' ? 'selected':''}} >
                                            What is the date of your partner's birthday?
                                        </option>
                                        <option value="4" {{ $member->security_id=='4' ? 'selected':''}} >
                                            What is the date of your wedding anniversay?
                                        </option>
                                        <option value="5" {{ $member->security_id=='5' ? 'selected':''}} >
                                            What is your favourite movie?
                                        </option>
                                        <option value="6" {{ $member->security_id=='6' ? 'selected':''}} >
                                            What is your favourite food?
                                        </option>
                                        <option value="7" {{ $member->security_id=='7' ? 'selected':''}} >
                                            What is your favourite sports team?
                                        </option>
                                        <option value="8" {{ $member->security_id=='8' ? 'selected':''}} >
                                            What is your pet's name?
                                        </option>
                                    </select>
                                </div> 
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12">
                                    {{ trans('dashboard.Please_enter_your_answer_to_the_Security_Question') }} <span class="required">*</span>
                                </label>
                                <div class="col-sm-12">
                                    <input  type="text"  
                                            class="form-control" 
                                            name="security_answer" 
                                            value="{{ $member->security_answer }}"
                                        />
                                </div> 
                            </div>
                            <button type="submit" class="btn btn-new rounded">{{ trans('dashboard.Save_Setting') }} 
                                <span class="loader"></span>
                            </button>
                        </form>
                    </div>

                    {{-- <div class="col-sm-12 col-md-6 sm-box">
                        <form class="form-horizontal" method="post" id="securityform" action="{{ action('MemberController@updateInterestAreas') }}" style="display: none">
                            {!! csrf_field() !!}
                            {!! method_field('PATCH') !!}  
                            <h3 class="main-title mb20">Agreement and Privacy Settings</h3>
                            <div class="col-md-12 form-group tab-content">
                                <input  type="checkbox" class="validate[required]" 
                                        id="agree" name="agree" value="1" 
                                        {{ $member->receive_exclusive == '1' ? 'checked' : ''}}
                                    />
                                Receive exclusive offers and promotions from United Points
                                <ul class="interest">
                                    <li><small>Please indicate your areas of interest:</small></li>
                                    <li>
                                        <input type="checkbox" name="exclusive_interest_areas[]" value="entertainment" 
                                                {{ in_array('entertainment',$member->receive_exclusive_areas)?'checked':'' }} >
                                            &nbsp; Entertainment (Movies,Concerts,Clubs)
                                    </li>
                                    <li>
                                        <input type="checkbox" name="exclusive_interest_areas[]" value="event" id=""
                                            {{ in_array('event',$member->receive_exclusive_areas)?'checked':'' }}>
                                        &nbsp; Events
                                    </li>
                                    <li>
                                        <input type="checkbox" name="exclusive_interest_areas[]" value="fashion" id=""
                                            {{ in_array('fashion',$member->receive_exclusive_areas)?'checked':'' }}>
                                        &nbsp; Fashion & Accessories
                                    </li>
                                    <li>
                                        <input type="checkbox" name="exclusive_interest_areas[]" value="food" id=""
                                            {{ in_array('food',$member->receive_exclusive_areas)?'checked':'' }}>
                                        &nbsp; Food & Beverages
                                    </li>
                                    <li>
                                        <input type="checkbox" name="exclusive_interest_areas[]" value="living"
                                            {{ in_array('living',$member->receive_exclusive_areas)?'checked':'' }}>
                                        &nbsp; Home & Living
                                    </li>
                                    <li>
                                        <input type="checkbox" name="exclusive_interest_areas[]" value="hotel" 
                                            {{ in_array('hotel',$member->receive_exclusive_areas)?'checked':'' }}>
                                        &nbsp; Hotel,Travel Deals & Packages
                                    </li>
                                    <li>
                                        <input type="checkbox" name="exclusive_interest_areas[]" value="it" 
                                            {{ in_array('it',$member->receive_exclusive_areas)?'checked':'' }}>
                                        &nbsp; IT Gadgets & Electronics
                                    </li>
                                </ul>
                                <ul class="mt20 agree">
                                    <li><a href="#">Membership Agreement</a></li>
                                    <li><a href="{{ url('privacy') }}">Privacy Policy</a></li>
                                    <li><a href="#">Returns, Refunds and Cancellation Policy</a></li>
                                </ul>
                            </div>
                            <button type="submit" class="btn btn-new rounded">Save settings</button>
                        </form>
                    </div> --}}
                </div>
            </div>

        </div>
    </div>
</section>
<!-- footer links -->
@include('site.bottom-menu')
@stop
<!-- footer section -->
@section('footer') 
<script type="text/javascript">
    var AuthId= "{{ auth()->user()->id }}";
</script> 
<script type="text/javascript" src="{{ asset('metronic/global/plugins/select2/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('site/js/update-password.js' )}}"></script>
<script>
    $('#b_country, #s_country_1, #s_country_2, #s_country_3').select2();
</script>
<script type="text/javascript">    
    (function(){
        // Setting all of the js Header with Xcsrf token
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });        

        var PwdForm = ValidateForm.instance;

        $('.loader').hide(); $('.paswordStatus').hide(); 
        
        // The password change form
        $('#pwdUpdateForm').submit(function(e){
            if(!PwdForm.valid()){
                return false;
            }
            e.preventDefault();
            var formUrl = $(this).attr('action')
            var data = { 
                currentpassword: $(this).find('input[name="currentpassword"]').val(),
                newpassword: $(this).find('input[name="newpassword"]').val(),
                newpassword_confirmation: $(this).find('input[name="newpassword_confirmation"]').val(),
            };
            var self = this;
            $.ajax({
                type: 'patch',
                url: formUrl,
                data: data,
                dataType: 'json',
                beforeSend: function() {
                    $(self).find("button[type='submit']").addClass('disabled')
                    $(self).find('.loader').show();
                },
                success: function(data){
                    $(self).find("button[type='submit']").removeClass('disabled')
                    $(self).find('.loader').hide();
                    $('.paswordStatus.alert-success').show();
                    $(self).find('input').val('')                
                },
                error: function(data){
                    if(data.status==422){
                        var errors = data.responseJSON;
                        for(var e in errors){
                            var error = $(self).find('input[name='+e+']')
                            $(error).closest('div.form-group').addClass('has-error')
                            if(!error.next('span').length){
                                var errorMsg = "<span class='help-block help-block-error'>"+errors[e]+"</span>"
                                $(errorMsg).insertAfter(error);
                            }
                            else{
                                $(error).next('span').empty()
                                $(error).next('span').html(errors[e])
                            }
                        }
                        $(self).find("button[type='submit']").removeClass('disabled') 
                        $(self).find('.loader').hide();                         
                    }else{
                        $('.paswordStatus.alert-danger').show();
                        $(self).find("button[type='submit']").removeClass('disabled') 
                        $(self).find('.loader').hide();                             
                    }

                }
            });
            return false;
        })

        // The password change form
        $('#securityForm').submit(function(e){
            e.preventDefault();
            var formUrl = $(this).attr('action')
            var data = { 
                security_answer: $(this).find('input[name="security_answer"]').val(),
                security_question: $(this).find('select[name="security_question"]').val()
            };
            var self = this;
            $.ajax({
                type: 'patch',
                url: formUrl,
                data: data,
                dataType: 'json',
                beforeSend: function() {
                    $(self).find("button[type='submit']").addClass('disabled')
                    $(self).find('.loader').show();
                },
                success: function(data){
                    $(self).find("button[type='submit']").removeClass('disabled')
                    $(self).find('.loader').hide();
                    $('.paswordStatus.alert-success').show();                    
                },
                error: function(data){
                    if(data.status==422){
                        var errors = data.responseJSON;
                        for(var e in errors){
                            var error = $(self).find('[name='+e+']')
                            $(error).closest('div.form-group').addClass('has-error')
                            if(!error.next('span').length){
                                var errorMsg = "<span class='help-block help-block-error'>"+errors[e]+"</span>";
                                var container = $(error).closest('div');
                                $(errorMsg).appendTo(container);
                            }
                            else{
                                $(error).next('span').empty()
                                $(error).next('span').html(errors[e])
                            }
                        }
                        $(self).find("button[type='submit']").removeClass('disabled') 
                        $(self).find('.loader').hide();
                    }else{
                        $('.paswordStatus.alert-danger').show();                        
                        $(self).find("button[type='submit']").removeClass('disabled') 
                        $(self).find('.loader').hide(); 
                    }

                }
            });
            return false;
        })

        $('form :input').on('change keyup',function(){
            $(this).closest('.form-group').removeClass('has-error')
            $(this).closest('.form-group').find('span.help-block').empty()
        })

        $('#security .close').on('click',function(e){
            e.stopImmediatePropagation(); // stop bootstrap close event, because it removes alert from DOM
            $(this).closest('.paswordStatus').hide(); // just hide it
        })

    })()

</script>
@stop