@extends('layout.app')
@section('title')
    {{ __('message.account_setting') }}
@stop
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/css/plugins/forms/pickers/form-pickadate.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/css/plugins/forms/pickers/form-flat-pickr.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/css/plugins/forms/form-validation.css")}}">
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">@lang("message.account_setting")</h2>

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

        </div>
        <div class="content-body">
            <!-- account setting page -->
            <section id="page-account-settings">
                <div class="row">
                    <!-- left menu section -->
                    <div class="col-md-3 mb-2 mb-md-0">
                        <ul class="nav nav-pills flex-column nav-left">
                            <!-- general -->
                            <li class="nav-item">
                                <a class="nav-link active" id="account-pill-general" data-toggle="pill" href="#account-vertical-general" aria-expanded="true">
                                    <i data-feather="user" class="font-medium-3 mr-1"></i>
                                    <span class="font-weight-bold">@lang("message.general")</span>
                                </a>
                            </li>
                            <!-- change password -->
                            <li class="nav-item">
                                <a class="nav-link" id="account-pill-password" data-toggle="pill" href="#account-vertical-password" aria-expanded="false">
                                    <i data-feather="lock" class="font-medium-3 mr-1"></i>
                                    <span class="font-weight-bold">@lang("message.change_password")</span>
                                </a>
                            </li>

                        </ul>
                    </div>
                    <!--/ left menu section -->

                    <!-- right content section -->
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-body">
                                <div class="tab-content">
                                    <!-- general tab -->
                                    <div role="tabpanel" class="tab-pane active" id="account-vertical-general" aria-labelledby="account-pill-general" aria-expanded="true">
                                        <!-- header media -->
                                        <x-alert/>
                                        <form action="{{route("users.profile.store",$user_data->id)}}" method="POST" class=" mt-2" enctype="multipart/form-data">
                                            @csrf
                                        <div class="media">
                                            <a href="javascript:void(0);" class="mr-25">
                                                <img src="@if($user_data->photo) {{asset("storage/".$user_data->photo)}} @else {{asset("app-assets/images/portrait/small/avatar-s-11.jpg")}} @endif" id="account-upload-img" class="rounded mr-50" alt="profile image" height="80" width="80" />
                                            </a>
                                            <!-- upload and reset button -->
                                            <div class="media-body mt-75 ml-1">
                                                <label for="account-upload" class="btn btn-sm btn-primary mb-75 mr-75">@lang("message.upload")</label>
                                                <input type="file" id="account-upload" name="photo" hidden accept="image/*" />
                                                <button class="btn btn-sm btn-outline-secondary mb-75">@lang("message.reset")</button>
                                                <p>@lang("message.photo_role")</p>
                                            </div>
                                            <!--/ upload and reset button -->
                                        </div>
                                        <!--/ header media -->

                                        <!-- form -->

                                            <div class="row">

                                                <div class="col-12 col-sm-6">
                                                    <div class="form-group">
                                                        <label for="account-name">@lang("name")</label>
                                                        <input type="text"  class="form-control" id="account-name" name="name" placeholder="Name" value="{{$user_data->name}}" />
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="form-group">
                                                        <label for="account-e-mail">@lang("message.email")</label>
                                                        <input type="email" class="form-control" id="account-e-mail" name="email" placeholder="Email" value="{{$user_data->email}}" />
                                                    </div>
                                                </div>


                                                <div class="col-12">
                                                    <button type="submit" class="btn btn-primary mt-2 mr-1">@lang("message.save_change")</button>
                                                    <button type="reset" class="btn btn-outline-secondary mt-2">@lang("message.cancel")</button>
                                                </div>
                                            </div>
                                        </form>
                                        <!--/ form -->
                                    </div>
                                    <!--/ general tab -->

                                    <!-- change password -->
                                    <div class="tab-pane fade" id="account-vertical-password" role="tabpanel" aria-labelledby="account-pill-password" aria-expanded="false">
                                        <!-- form -->
                                        <form action="{{route("users.profile.store.password",$user_data->id)}}" method="POST">
                                            @csrf
                                            <div class="row">
                                                <div class="col-lg-6 col-md-12 col-sm-12">
                                                    <div class="form-group">
                                                        <label for="name" class="form-label">{{ __('message.old_password') }}</label>
                                                        <input type="password" class="form-control" id="confirm_password" name="password"
                                                               value="{{ old('old_password') }}" required autofocus>
                                                        <span id='message'></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6 col-md-12 col-sm-12">
                                                    <div class="form-group">
                                                        <label for="name" class="form-label">{{ __('message.password') }}</label>
                                                        <input type="password" class="form-control" id="password" name="new_password"
                                                               value="{{ old('password') }}"  required autofocus>
                                                    </div>
                                                </div>
                                                {{-- end client name --}}
                                                {{-- client name --}}
                                                <div class="col-lg-6 col-md-12 col-sm-12">
                                                    <div class="form-group">
                                                        <label for="name" class="form-label">{{ __('message.confirm_password') }}</label>
                                                        <input type="password" class="form-control" id="confirm_password" name="new_password_confirmation"
                                                               value="{{ old('confirm_password') }}" required autofocus>
                                                        <span id='message'></span>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <button type="submit" class="btn btn-primary mr-1 mt-1">Save changes</button>
                                                    <button type="reset" class="btn btn-outline-secondary mt-1">Cancel</button>
                                                </div>
                                            </div>
                                        </form>
                                        <!--/ form -->
                                    </div>
                                    <!--/ change password -->


                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ right content section -->
                </div>
            </section>
            <!-- / account setting page -->

        </div>
    </div>
@endsection
@section("js")
    <script src="{{asset("app-assets/vendors/js/extensions/dropzone.min.js")}}"></script>
    <script src="{{asset("app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js")}}"></script>
    <script src="{{asset("app-assets/js/scripts/pages/page-account-settings.js")}}"></script>
@endsection