@extends('client.layouts.app')
@section('title','تعديل الملف الشخصي')
@section('content')
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-header row">
      </div>
      <div class="content-body">
        <section class="app-user-view-account">
<div class="row">
  <!-- User Sidebar -->
  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
    <!-- User Card -->
    <div class="card">
      <div class="card-body">
        <div class="user-avatar-section">
          <div class="d-flex align-items-center flex-column">
            <img class="img-fluid rounded mt-3 mb-2" src="{{asset($profile->profile_pic)}}" height="110" width="110" alt="User avatar">
            <div class="user-info text-center">
              <h4>{{$user->name}}</h4>
              <span class="badge bg-light-secondary">@foreach (Auth::user()->getRoleNames() as $v){{ $v }}@endforeach</span>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-around my-2 pt-75">
          <div class="d-flex align-items-start me-2">

          </div>
          <div class="d-flex align-items-start">

          </div>
        </div>
        <h4 class="fw-bolder border-bottom pb-50 mb-1">معلومات الحساب</h4>
        <div class="info-container">
          <ul class="list-unstyled">
            <li class="mb-75">
              <span class="fw-bolder me-25">الاسم :</span>
              <span>{{$user->name}}</span>
            </li>
            <li class="mb-75">
              <span class="fw-bolder me-25">رقم الموبايل:</span>
              <span>{{$user->email}}</span>
            </li>
            <li class="mb-75">
              <span class="fw-bolder me-25">حالة الحساب :</span>
                @if($user->Status=='active')
              <span class="badge bg-light-success">نشط</span>
                @else
                <span class="badge bg-light-danger">محظور</span>
                @endif
            </li>
            <li class="mb-75">
              <span class="fw-bolder me-25">الصلاحية :</span>
              <span>{{$v}}</span>
            </li>
            {{-- <li class="mb-75">
              <span class="fw-bolder me-25">رقم الموبايل :</span>
              <span>{{$user->phone_number}}</span>
            </li> --}}
            <li class="mb-75">
              <span class="fw-bolder me-25">اللغة  :</span>
              <span>العربية</span>
            </li>
            <li class="mb-75">
              <span class="fw-bolder me-25">البلد :</span>
              <span>{{$profile->city_name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- /User Card -->
    <!-- Plan Card -->
    <div class="card border-primary">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start">
          <span class="badge bg-light-primary">{{$subscription->package->package_name}}</span>
          <div class="d-flex justify-content-center">
            <sup class="h5 pricing-currency text-primary mt-1 mb-0">$</sup>
            <span class="fw-bolder display-5 mb-0 text-primary">{{$subscription->type->type_price}}</span>
            <sub class="pricing-duration font-small-4 ms-25 mt-auto mb-2">/ {{$subscription->type->type_name}}</sub>
          </div>
        </div>
        <ul class="ps-1 mb-2">
          <li class="mb-50"> المستخدمين {{$subscription->package->users_count}}  </li>
          <li class="mb-50">الموظفين {{$subscription->package->employees_count}}  </li>
          <li class="mb-50"> العملاء {{$subscription->package->outer_clients_count}}  </li>
          <li class="mb-50">الموردين {{$subscription->package->suppliers_count}}  </li>
          <li class="mb-50"> الفواتير {{$subscription->package->bills_count}}  </li>

        </ul>
        <div class="d-flex justify-content-between align-items-center fw-bolder mb-50">
          <span> مدة الباقة  {{$period}} يوم</span>
          <span>إنتهت {{$spend}} من {{$period}} أيام</span>
        </div>
        <div class="progress mb-50" style="height: 8px">
          <div class="progress-bar" role="progressbar" style="width: {{($spend/$period)*100}}%" aria-valuenow="65" aria-valuemax="100" aria-valuemin="80"></div>
        </div>
        <span> متبقي {{$period-$spend}} أيام</span>
        <div class="d-grid w-100 mt-2" align="center">
         <a href="{{route('client.packages.index')}}"> <button class="btn btn-primary waves-effect waves-float waves-light" >
            تجديد الباقة
          </button>
        </a>
        </div>
      </div>
    </div>
    <!-- /Plan Card -->
  </div>
  <!--/ User Sidebar -->

  <!-- User Content -->
  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
    <!-- User Pills -->
    <ul class="nav nav-pills mb-2">
      <li class="nav-item" >
        <a class="nav-link active" id="user" >
            <i data-feather="user" class="font-medium-3 me-50"></i>
          <span class="fw-bold">الحساب</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="security" >
            <i data-feather="lock" class="font-medium-3 me-50"></i>
          <span class="fw-bold">الآمان</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="bill">
            <i data-feather="credit-card" class="font-medium-3 me-50"></i>
          <span class="fw-bold">الدفع</span>
        </a>
      </li>
    </ul>
    <!--/ User Pills -->

    <div class="card" id="userSection">
        <h4 class="card-header">تعديل بيانات حسابك</h4>
        <div class="card-body pt-1">
          
            <form id="form" method="post">
                @csrf
                <div class="row">
                <div class="col-md-6 col-12">
                    <div class="mb-1">
                <b for=""> الاسم </b>
                <input type="text" class="form-control"  value="{{ Auth::user()->name }}"
                       placeholder="الاسم" name="name">
            </div>
            </div>
            <div class="col-md-6 col-12">
                <div class="mb-1">
                <b for=""> رقم الموبايل</b>
                <input type="text" class="form-control text-left"  
                       value="{{ Auth::user()->email }}" placeholder="رقم الموبايل" name="email">
            </div>
            </div>


                                <div class="col-md-6 col-12">
                                                  <div class="mb-1">
                                    <b> النوع : </b>
                                    <select  name="gender" id="select-beast" class="form-control">
                                        <option value="">حدد النوع</option>
                                        <option @if($profile->gender == "male")
                                                selected
                                                @endif value="male">ذكر
                                        </option>
                                        <option @if($profile->gender == "female")
                                                selected
                                                @endif value="female">انثى
                                        </option>
                                        <option @if($profile->gender == "other")
                                                selected
                                                @endif value="other">اخرى
                                        </option>
                                    </select>
                                </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">

                                    <b class="form-label d-bsecurity"> العمر </b>
                                    <input value="{{$profile->age}}" type="number" min="1"  max="100" name="age" placeholder="العمر"
                                           class="form-control">
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                           <div class="mb-1">
                                    <b class="form-label d-bsecurity"> المدينة او البلد </b>
                                    <input value="{{$profile->city_name}}" type="text"  name="city_name" placeholder="البلد أو المدينة"
                                           class="form-control">
                                </div>
                                </div>
                                <div class="col-md-6 col-12">
                                              <div class="mb-1">
                                    <b for=""> الصورة الشخصية </b>
                                    <input accept=".jpg,.png,.jpeg" type="file"
                                           oninput="pic.src=window.URL.createObjectURL(this.files[0])" id="file"
                                           name="profile_pic" class="form-control">
                                           <img id="pic"   style="width: 100%; height:50px;" />
                                </div>
                            </div>




        </div>
        <div class="clearfix"></div>
        <div class="col-12" align="center">
            <br>
              <button type="submit" class="btn btn-success me-1">تعديل</button>
              <button type="button" class="btn btn-outline-danger" onclick="window.history.back()">رجوع</button>
            </div>

         </div>
        </form>
        </div>
        <div class="card" id="securitySection" style="display: none">
        <h4 class="card-header">تغير كلمة المرور</h4>
        <div class="card-body pt-1">
          
            <form id="changPassword" method="post">
                @csrf
                <div class="row">
                    
                    <div class="form-group col-lg-4 mb-2">
                        <b for="">كلمة المرور الحالية</b>
                        <input type="password" class="form-control"  
                               placeholder="كلمة المرور الحالية" name="currentPassword" >
                    </div>
                    <div class="form-group col-lg-4 mb-2">
                        <b for="">كلمة المرور الجديدة</b>
                        <input type="password" class="form-control"  
                               placeholder="كلمة المرور" name="password" id="password">
                    </div>
                    <div class="form-group col-lg-4 mb-2">
                        <b for=""> تاكيد كلمة المرور </b>
                        <input type="password" class="form-control" 
                               placeholder="تاكيد كلمة المرور" name="password_confirmation">
                    </div>



                 </div>
        <div class="clearfix"></div>
        <div class="col-12" align="center">
            <br>
              <button type="submit" class="btn btn-success me-1">تغير كلمة المرور</button>
              <button type="button" class="btn btn-outline-danger" onclick="window.history.back()">رجوع</button>
            </div>

         </div>
        </form>
        </div>
      </div>

  <!--/ User Content -->
</div>
</section>
      </div>
    </div>
  </div>
  @endsection
  @section('script')
    <script>
$('#security').click(function(){
    $(this).addClass('active');
    $('#user').removeClass('active');
    $('#bill').removeClass('active');

    $('#securitySection').show();

    $('#userSection').hide();
    $('#billSection').hide();


});

$('#user').click(function(){
    $(this).addClass('active');
    $('#security').removeClass('active');
    $('#bill').removeClass('active');

    $('#userSection').show();

    $('#securitySection').hide();
    $('#billSection').hide();

});

$('#bill').click(function(){
    $(this).addClass('active');
    $('#security').removeClass('active');
    $('#user').removeClass('active');

});



$("#form").on('submit',(function(e) {

e.preventDefault();

$.ajax({

  url: "{{route('client.profile.update')}}",

  type: "POST",

  data:  new FormData(this),

  dataType:  'json',

  contentType: false,

  cache: false,

  processData:false,
  
  beforeSend : function (){var ifConnected = window.navigator.onLine;if (!ifConnected) {toastr.info("يتم الآن إعادة الإتصال","لا يوجد إتصال بالإنترنت",{positionClass: "toast-top-right",tapToDismiss: !1,timeOut: 2e3,rtl: $("html").attr("data-textdirection")});}},

  success: function(response) {

    if(response.status){

            toastr.success("",response.message,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });      

    }else{
        toastr.warning("",response.message,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });   
    } 

  },
  error: function(response){
          $.each(response.responseJSON.errors, function (key, item) 
          {
            toastr.error("",item,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });

          });
  },

 });

}));

$((function(){"use strict";var r=$("#changPassword");r.length&&r.validate({rules:{"password":{minlength:6,required:true},"password_confirmation":{minlength:6,required:true,equalTo:"#password"},"currentPassword":{required:true} }})}));


$("#changPassword").on('submit',(function(e) {

e.preventDefault();

$.ajax({

  url: "{{route('client.profile.password')}}",

  type: "POST",

  data:  new FormData(this),

  dataType:  'json',

  contentType: false,

  cache: false,

  processData:false,
  
  beforeSend : function (){var ifConnected = window.navigator.onLine;if (!ifConnected) {toastr.info("يتم الآن إعادة الإتصال","لا يوجد إتصال بالإنترنت",{positionClass: "toast-top-right",tapToDismiss: !1,timeOut: 2e3,rtl: $("html").attr("data-textdirection")});}},

  success: function(response) {

    if(response.status){

            toastr.success("",response.message,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });      
            document.getElementById("changPassword").reset();


    }else{
        toastr.warning("",response.message,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });   
    } 

  },
  error: function(response){
          $.each(response.responseJSON.errors, function (key, item) 
          {
            toastr.error("",item,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });

          });
  },

 });

}));
    </script>
@endsection

