@extends('layouts.profile')
@section('page_title')
@parent
ویرایش حساب کاربری
@endsection
@section('head-js')
<link type="text/css" href="/assets/plugins/persiandatepicker/persian-datepicker.min.css" rel="stylesheet" />
<script src="/assets/plugins/persiandate/persian-date.min.js"></script>
<script src="/assets/plugins/persiandate/persian-datepicker.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

    $('#birthday').persianDatepicker({
        altField: '#birthdayAlt',
        format: 'YYYY/MM/DD',
        initialValue: false,
        responsive:true,
        initialValueType: 'persian',
        toolbox:{
            calendarSwitch:{
                enabled: false
            }
        },
        navigator:{
            scroll:{
                enabled: false
            }
        },
    });

});
</script>
<style type="text/css">
  .datepicker-plot-area{
    direction: ltr;
    text-align: center;
  }
  .datepicker-plot-area span{
    text-align: center;
  }
  .datepicker-plot-area div{
    text-align: center;
  }
</style>
@stop
@section('main-head')
<section class="breadcrumb-section section-b-space">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="page-title">
                    <h1>ویرایش حساب کاربری</h1>
                </div>
            </div>
            <div class="col-12">
                <nav aria-label="breadcrumb" class="theme-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">خانه</a></li>
                        <li class="breadcrumb-item"><a href="{{url('/profile/dashboard')}}">پروفایل</a></li>
                        <li class="breadcrumb-item active" aria-current="page">ویرایش حساب کاربری</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>
@stop
@section('main')
<div class="profile-content">
    <div class="profile-stats">
      {!! Form::open(['url'=>'/profile/savechange-profile','method'=>'post' , 'enctype' => 'multipart/form-data']) !!}
        <div class="profile-stats-row">
          <h4>ویرایش حساب کاربری</h4>
          <div class="row">
            <div class="col-sm-6">
                  <div class="form-group">
                      <label>شماره همراه</label>
                      <input type="text" class="form-control" value="{{$user->mobile}}" readonly>
                  </div>
                  <label>نام</label>
                  <div class="form-group">
                      <input type="text" class="form-control" name="fname" value="{{$user->fname}}" id="fname" required>
                  </div>

                  <label>نام خانوادگی</label>
                  <div class="form-group input-with-label  text-left">
                      <input type="text" class="form-control" name="lname" value="{{$user->lname}}" id="lname" required>
                  </div>
                
                  <div class="form-group">
                      <label>پست الکترونیکی</label>
                      <input type="email" class="form-control" name="email" value="{{$user->email}}" id="email">
                  </div>
                  <div class="form-group">
                    <label>رمز عبور</label>
                    <input type="password" class="form-control" name="password">
                  </div>
                
                  <div class="form-group " >
                    <label>تکرار رمز عبور</label>
                    <input type="password" class="form-control" name="password_confirmation">
                  </div>

            </div>
            <div class="col-sm-6">
              <div style=" display: table; margin: 0 auto;">
              <div id="image-preview" style="padding-top: 25px; width:200px; height: 200px; position: relative; overflow: hidden; background-color: inherit; color: inherit; margin: 0 auto;">
                <img @if($user->avatar) src="{{asset('/uploads/avatars/'.$user->avatar)}}" @else src="/avatar.png" @endif class="default-user-pic img-responsive" style=" width: 100%; height: auto;" id="blah1" alt="your image" width="100" height="100" align="middle">
              </div>
              <label class="input-group-btn" style="display: table; width: 100%; margin: 0 auto;">
                <span class="btn btn-primary" style="border-radius:0; width:100%; margin: 0 auto;text-align: center;">
                  بارگذاری آواتار<input type="file" style="display: none;" multiple  onchange="document.getElementById('blah1').src = window.URL.createObjectURL(this.files[0])" name="avatar">
                </span>
              </label>
              </div>
                  <div class="form-group">
                    <label for="gender">جنسیت *</label>
                    <select class="form-control" name="gender" id="gender">
                        <option value="1" @if($user->gender == 1) selected @endif>خانم</option>
                        <option value="2" @if($user->gender == 2) selected @endif>آقا</option>
                    </select>                      
                  </div>                
                <div class="form-group">
                  <label>تاریخ تولد</label>

                  <input id="birthday" type="text" class="form-control input-sm inline-date" autocomplete="off"/>
                  <input type="hidden" id="birthdayAlt" name="birthday" value="">
                  @if($user->birthday) <p class="">تاریخ تولد شما : {{\Morilog\Jalali\Jalalian::forge($user->birthday)->format('d F Y')}} </p> @endif 
                  

                  
                </div>
          </div>

        </div>
            <div class="col-12" style="padding:0;">
                <div class="profile-stats-row form-legal-row-submit">
                  <button type="submit" class="btn btn-primary btn-store">
                      ثبت اطلاعات کاربری
                  </button>
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
</div>
@stop
@section('js')
<script src="/assets/plugins/persiandatepicker/persian-date.min.js"></script>
<script src="/assets/plugins/persiandatepicker/persian-datepicker.min.js"></script>
@stop