@extends('template.master')

@section('page_styles')
{{--CUSTOM STYLES HERE--}}
<link rel="stylesheet" href="{{ asset('css/layout/account.css') }}">
@stop

@section('content')
<div class="container-fluid account-page">
    <!-- Begin Page Header-->
    <div class="row">
        <div class="page-header">
            <div class="d-flex align-items-center">
                <h2 class="page-header-title">My Account</h2>

            </div>
        </div>
    </div>
    <!-- End Page Header -->

    <!--Tabs started-->

    <ul class="nav nav-tabs nav-left flex-column nav-tabs_new" role="tablist" aria-orientation="vertical">
        <li class="nav-item">
            <a class="nav-link active" id="vert-tab-1" data-toggle="tab" href="#v-tab-1" role="tab" aria-controls="v-tab-1" aria-selected="true">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
                        <path d="M55,27.5C55,12.337,42.663,0,27.5,0S0,12.337,0,27.5c0,8.009,3.444,15.228,8.926,20.258l-0.026,0.023l0.892,0.752  c0.058,0.049,0.121,0.089,0.179,0.137c0.474,0.393,0.965,0.766,1.465,1.127c0.162,0.117,0.324,0.234,0.489,0.348  c0.534,0.368,1.082,0.717,1.642,1.048c0.122,0.072,0.245,0.142,0.368,0.212c0.613,0.349,1.239,0.678,1.88,0.98  c0.047,0.022,0.095,0.042,0.142,0.064c2.089,0.971,4.319,1.684,6.651,2.105c0.061,0.011,0.122,0.022,0.184,0.033  c0.724,0.125,1.456,0.225,2.197,0.292c0.09,0.008,0.18,0.013,0.271,0.021C25.998,54.961,26.744,55,27.5,55  c0.749,0,1.488-0.039,2.222-0.098c0.093-0.008,0.186-0.013,0.279-0.021c0.735-0.067,1.461-0.164,2.178-0.287  c0.062-0.011,0.125-0.022,0.187-0.034c2.297-0.412,4.495-1.109,6.557-2.055c0.076-0.035,0.153-0.068,0.229-0.104  c0.617-0.29,1.22-0.603,1.811-0.936c0.147-0.083,0.293-0.167,0.439-0.253c0.538-0.317,1.067-0.648,1.581-1  c0.185-0.126,0.366-0.259,0.549-0.391c0.439-0.316,0.87-0.642,1.289-0.983c0.093-0.075,0.193-0.14,0.284-0.217l0.915-0.764  l-0.027-0.023C51.523,42.802,55,35.55,55,27.5z M2,27.5C2,13.439,13.439,2,27.5,2S53,13.439,53,27.5  c0,7.577-3.325,14.389-8.589,19.063c-0.294-0.203-0.59-0.385-0.893-0.537l-8.467-4.233c-0.76-0.38-1.232-1.144-1.232-1.993v-2.957  c0.196-0.242,0.403-0.516,0.617-0.817c1.096-1.548,1.975-3.27,2.616-5.123c1.267-0.602,2.085-1.864,2.085-3.289v-3.545  c0-0.867-0.318-1.708-0.887-2.369v-4.667c0.052-0.52,0.236-3.448-1.883-5.864C34.524,9.065,31.541,8,27.5,8  s-7.024,1.065-8.867,3.168c-2.119,2.416-1.935,5.346-1.883,5.864v4.667c-0.568,0.661-0.887,1.502-0.887,2.369v3.545  c0,1.101,0.494,2.128,1.34,2.821c0.81,3.173,2.477,5.575,3.093,6.389v2.894c0,0.816-0.445,1.566-1.162,1.958l-7.907,4.313  c-0.252,0.137-0.502,0.297-0.752,0.476C5.276,41.792,2,35.022,2,27.5z" />
                    </svg>
                </div>
                <span class="txt">
                    <span class="txt-md">Account Details</span>
                    <span class="txt-sm">Details</span>
                </span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="vert-tab-2" data-toggle="tab" href="#v-tab-2" role="tab" aria-controls="v-tab-2" aria-selected="false">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 395.973 395.973" style="enable-background:new 0 0 395.973 395.973;" xml:space="preserve">
                        <g>
                            <g>
                                <path d="M358.477,0H37.52C16.838,0,0.019,16.821,0.019,37.503v320.97c0,20.682,16.819,37.5,37.501,37.5    h320.957c20.684,0,37.478-16.818,37.478-37.5V37.503C395.954,16.82,379.161,0,358.477,0z M363.844,358.471    c0,2.937-2.405,5.365-5.367,5.365H37.52c-2.938,0-5.356-2.431-5.356-5.365V37.502c0-2.962,2.417-5.357,5.356-5.357h320.957    c2.962,0,5.367,2.396,5.367,5.357V358.471z" />
                                <path d="M321.557,73.149H74.417c-4.971,0-9,4.029-9,9v31.674c0,4.971,4.029,9,9,9h247.14    c4.971,0,9-4.029,9-9V82.149C330.557,77.177,326.527,73.149,321.557,73.149z" />
                                <path d="M321.557,173.149H74.417c-4.971,0-9,4.029-9,9v31.673c0,4.972,4.029,9,9,9h247.14    c4.971,0,9-4.028,9-9v-31.673C330.557,177.177,326.527,173.149,321.557,173.149z" />
                                <path d="M321.557,273.148H74.417c-4.971,0-9,4.029-9,9v31.674c0,4.972,4.029,9,9,9h247.14    c4.971,0,9-4.028,9-9v-31.674C330.557,277.177,326.527,273.148,321.557,273.148z" />
                            </g>
                        </g>
                    </svg>
                </div>
                <span class="txt">
                    <span class="txt-md">Account Activities</span>
                    <span class="txt-sm">Activities</span>
                </span>
            </a>
        </li>
    </ul>
    <div class="tab-content d-flex align-items-center">
        <div class="tab-pane fade show active" id="v-tab-1" role="tabpanel" aria-labelledby="vert-tab-1">
            <div class="card new-card">
                <div class="card-title">
                    <h1>Account Details</h1>
                </div>
                <div class="card-content">
                    <div class="card-group">
                        @if ($errors->any())
                        <div class="alert alert-danger" style="width: 100%;">
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @elseif ($error)
                        <div class="alert alert-danger" style="width: 100%;">
                            <ul>
                                <li>{{ $error }}</li>
                            </ul>
                        </div>
                        @elseif ($success)
                        <div class="alert alert-success" style="width: 100%;">
                            <ul>
                                <li>{{ $success }}</li>
                            </ul>
                        </div>
                        @endif
                        <div class="card-group-title">
                            <h3>Personal Information</h3>
                        </div>
                        <form class="shake" role="form" method="post" id="userForm" name="user-form" data-toggle="validator" action="{{ route('account.store') }}" enctype="multipart/form-data" style="width: 100%">
                        @csrf
                            <div class="card-group-content">
                                <div class="form-group row mb-3">
                                    <div class="col-xl-6 mb-3">
                                        @if (!auth()->guest())
                                        <label class="form-control-label">Profile Picture</label><br/>
                                        @if(isset($user->avatar)) <img id="profilePicture" src="{{ asset('uploads/avatar/'.$user->avatar) }}" style="width: 25%;" alt="your image" />@endif
                                        <div class="file-select" select-name="profilePicture">
                                            <div class="select">
                                                <input type="file" class="form-control" name="avatar" onchange="readURL(this,'profilePicture');">
                                            </div>
                                            <div class="image">
                                                <img id="profilePicture" src="#" alt="your image" />
                                                <div class="edit-icon">
                                                    <i class="la la-2x la-edit"></i>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="col-xl-6 mb-3">
                                        <label class="form-control-label">Name<span class="text-danger ml-2">*</span></label>
                                        <input type="text" name="name" value="{{ $user->name }}" placeholder="Your Name" class="form-control" required="required">
                                    </div>
                                </div>
                                <div class="form-group row mb-3">
                                    <div class="col-xl-6">
                                        <label class="form-control-label">Email<span class="text-danger ml-2">*</span></label>
                                        <input type="text" name="email" readonly="readonly" placeholder="Your Email" value="{{ $user->email }}" class="form-control">
                                    </div>
                                    <div class="col-xl-6 mb-3">
                                        <label class="form-control-label">Phone<span class="text-danger ml-2">*</span></label>
                                        <input type="number" name="phone" class="form-control" value="{{ $user->phone }}" placeholder="+00 987 654 32" required="required">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-xl-6 mb-3">
                                        <label class="form-control-label">Skype</label>
                                        <input type="text" name="skype" class="form-control" placeholder="+00 987 654 32" value="{{ $user->skype }}">
                                    </div>
                                </div>
                                <div class="row align-items-end mb-5 action-row">
                                    <button class="btn btn-square btn-outline-info">
                                        <span>Update Personal Details</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="card-group">
                        <div class="card-group-title">
                            <h3>Update Password</h3>
                        </div>
                        <div class="card-group-content">
                            <form class="shake" role="form" method="post" id="userForm" name="user-form" data-toggle="validator" action="{{ route('account.store') }}" enctype="multipart/form-data" style="width: 100%">
                                @csrf
                                <span class="password-text text-danger"></span>
                                <div class="form-group row ">
                                    <div class="col-xl-4 mb-3">
                                        <label class="form-control-label">Current Password<span class="text-danger ml-2">*</span></label>
                                        <input type="password" name="current_password" id="current_password" placeholder="Current password" class="form-control" required="required" onkeyup="javascript: validateAccount('current_password')">
                                    </div>
                                    <div class="col-xl-4 mb-3">
                                        <label class="form-control-label">New Password<span class="text-danger ml-2">*</span></label>
                                        <input type="password" name="password" placeholder="New password" id="password" class="form-control" required="required" onkeyup="javascript: validateAccount('password')">
                                    </div>
                                    <div class="col-xl-4 mb-3">
                                        <label class="form-control-label">Re-type New Password<span class="text-danger ml-2">*</span></label>
                                        <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Re-type new password" class="form-control" required="required" onkeyup="javascript: validateAccount('password')">
                                    </div>

                                </div>
                                <div class="update-pass-row mb-5">
                                    <div class="row align-items-end action-row ">
                                        <button class="btn btn-square btn-outline-info ">
                                            <span>Update Password</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="v-tab-2" role="tabpanel" aria-labelledby="vert-tab-2">
            <div class="card new-card">
                <div class="card-title">
                    <h1>Account Activities</h1>
                </div>
                <div class="card-content">
                    <div class="account-activities">
                        @foreach($logs as $log)
                            <div class="activity">
                                <div class="time-col">
                                    <small class="time">{{ $now->diffForHumans($log->created_at) }}</small>
                                </div>
                                <div class="text-col">
                                    <div class="icon">
                                        <i class="la la-rocket mr-2"></i>
                                    </div>
                                    <div class="text">
                                        <strong>{{ $log->description }}</strong>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @if(count($logs) >= 25)
                            <button type="button" class="btn btn-gradient-01 mb-2 mt-3">Load more</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Tabs End-->


<!-- Tabs Custom design Start-->
<div class="row flex-row" style="display:none;">
    <div class="col-lg-3">
        <ul class="side-menu">
            <li class="active">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
                        <path d="M55,27.5C55,12.337,42.663,0,27.5,0S0,12.337,0,27.5c0,8.009,3.444,15.228,8.926,20.258l-0.026,0.023l0.892,0.752  c0.058,0.049,0.121,0.089,0.179,0.137c0.474,0.393,0.965,0.766,1.465,1.127c0.162,0.117,0.324,0.234,0.489,0.348  c0.534,0.368,1.082,0.717,1.642,1.048c0.122,0.072,0.245,0.142,0.368,0.212c0.613,0.349,1.239,0.678,1.88,0.98  c0.047,0.022,0.095,0.042,0.142,0.064c2.089,0.971,4.319,1.684,6.651,2.105c0.061,0.011,0.122,0.022,0.184,0.033  c0.724,0.125,1.456,0.225,2.197,0.292c0.09,0.008,0.18,0.013,0.271,0.021C25.998,54.961,26.744,55,27.5,55  c0.749,0,1.488-0.039,2.222-0.098c0.093-0.008,0.186-0.013,0.279-0.021c0.735-0.067,1.461-0.164,2.178-0.287  c0.062-0.011,0.125-0.022,0.187-0.034c2.297-0.412,4.495-1.109,6.557-2.055c0.076-0.035,0.153-0.068,0.229-0.104  c0.617-0.29,1.22-0.603,1.811-0.936c0.147-0.083,0.293-0.167,0.439-0.253c0.538-0.317,1.067-0.648,1.581-1  c0.185-0.126,0.366-0.259,0.549-0.391c0.439-0.316,0.87-0.642,1.289-0.983c0.093-0.075,0.193-0.14,0.284-0.217l0.915-0.764  l-0.027-0.023C51.523,42.802,55,35.55,55,27.5z M2,27.5C2,13.439,13.439,2,27.5,2S53,13.439,53,27.5  c0,7.577-3.325,14.389-8.589,19.063c-0.294-0.203-0.59-0.385-0.893-0.537l-8.467-4.233c-0.76-0.38-1.232-1.144-1.232-1.993v-2.957  c0.196-0.242,0.403-0.516,0.617-0.817c1.096-1.548,1.975-3.27,2.616-5.123c1.267-0.602,2.085-1.864,2.085-3.289v-3.545  c0-0.867-0.318-1.708-0.887-2.369v-4.667c0.052-0.52,0.236-3.448-1.883-5.864C34.524,9.065,31.541,8,27.5,8  s-7.024,1.065-8.867,3.168c-2.119,2.416-1.935,5.346-1.883,5.864v4.667c-0.568,0.661-0.887,1.502-0.887,2.369v3.545  c0,1.101,0.494,2.128,1.34,2.821c0.81,3.173,2.477,5.575,3.093,6.389v2.894c0,0.816-0.445,1.566-1.162,1.958l-7.907,4.313  c-0.252,0.137-0.502,0.297-0.752,0.476C5.276,41.792,2,35.022,2,27.5z" />
                    </svg>
                </div>
                <span>Account Details</span>
            </li>
            <li>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 395.973 395.973" style="enable-background:new 0 0 395.973 395.973;" xml:space="preserve">
                        <g>
                            <g>
                                <path d="M358.477,0H37.52C16.838,0,0.019,16.821,0.019,37.503v320.97c0,20.682,16.819,37.5,37.501,37.5    h320.957c20.684,0,37.478-16.818,37.478-37.5V37.503C395.954,16.82,379.161,0,358.477,0z M363.844,358.471    c0,2.937-2.405,5.365-5.367,5.365H37.52c-2.938,0-5.356-2.431-5.356-5.365V37.502c0-2.962,2.417-5.357,5.356-5.357h320.957    c2.962,0,5.367,2.396,5.367,5.357V358.471z" />
                                <path d="M321.557,73.149H74.417c-4.971,0-9,4.029-9,9v31.674c0,4.971,4.029,9,9,9h247.14    c4.971,0,9-4.029,9-9V82.149C330.557,77.177,326.527,73.149,321.557,73.149z" />
                                <path d="M321.557,173.149H74.417c-4.971,0-9,4.029-9,9v31.673c0,4.972,4.029,9,9,9h247.14    c4.971,0,9-4.028,9-9v-31.673C330.557,177.177,326.527,173.149,321.557,173.149z" />
                                <path d="M321.557,273.148H74.417c-4.971,0-9,4.029-9,9v31.674c0,4.972,4.029,9,9,9h247.14    c4.971,0,9-4.028,9-9v-31.674C330.557,277.177,326.527,273.148,321.557,273.148z" />
                            </g>
                        </g>
                    </svg>
                </div>
                <span>Account Activities</span>
            </li>
        </ul>
    </div>
    <div class="col-lg-9">
        <div class="card new-card">
            <div class="card-title">
                <h1>Account Details</h1>
            </div>
            <div class="card-content">
                <div class="card-group">
                    <div class="card-group-title">
                        <h3>Personal Information</h3>
                    </div>
                    <div class="card-group-content">
                        <div class="input-group">
                            <label>First Name</label>
                            <div class="input">
                                <input type="text">
                            </div>
                        </div>
                        <div class="input-group">
                            <label> Last Name</label>
                            <div class="input">
                                <input type="text">
                            </div>
                        </div>
                        <div class="input-group">
                            <label> Nickname</label>
                            <div class="input">
                                <input type="text">
                            </div>
                        </div>
                        <div class="input-group">
                            <label> Email</label>
                            <div class="input">
                                <input type="text">
                            </div>
                        </div>
                        <div class="input-group">
                            <label> Phone</label>
                            <div class="input">
                                <input type="text">
                            </div>
                        </div>
                        <div class="input-group">
                            <label> Skype</label>
                            <div class="input">
                                <input type="text">
                            </div>
                        </div>
                        <div class="input-group">
                            <label>Update Password</label>
                            <div class="input">
                                <input type="text">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Tabs Custom design End-->

<!-- End Row -->

</div>

<script type="text/javascript">
    function readURL(input, name) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                console.log(e.target.result);
                $('#' + name).attr('src', e.target.result);
                $('.file-select[select-name=' + name + ']').addClass('has-file');

            }

            reader.readAsDataURL(input.files[0]);
        }
        $('.edit-icon').click(function() {
            $(this).parents('.file-select').removeClass('has-file');
            $(this).parents('.file-select').find('input').val('');
        });
    }

    function validateAccount(type) {
        var data = '';
        if (type == 'current_password') {
            data = {
                "_token": "{{ csrf_token() }}",
                "password": $('#current_password').val()
            };
        } else if (type == 'password' && ($('#password').val() != '' && $('#password_confirmation').val() != '')) {
            data = {
                "_token": "{{ csrf_token() }}",
                "current_password": $('#current_password').val(),
                "password": $('#password').val(),
                "password_confirmation": $('#password_confirmation').val()
            };
        }
        $.ajax({
            type: 'POST',
            url: 'validate-account/' + type,
            data: data,
            dataType: 'json',
            success: function(resp) {
                $('.password-text').text('');
                if(resp.errors && resp.errors.password != 'password')
                {
                    $('.password-text').text(resp.errors);
                }
            },
            error: function(xhr, status, error) {
                var err = xhr.responseJSON;
                $.each(err.errors, function(index, value) {
                    $('.password-text').text(value[0]);
                });
            }

        });
    }
</script>

@stop

@section('page_modals')

@stop
@section('page_scripts')
<!--CUSTOM SCRIPTS-->
<script src="{{ asset('page_assets/accounts/js/page.js')}}"></script>
@stop