@extends('layout.app')

@section('title', __('Profile'))
@section('data_col', "2-columns")
@section('body_class', "2-columns")

@push('styles')
    
@endpush

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                    <h3 class="content-header-title mb-0 d-inline-block">{{ __('Profile')}}</h3>
                </div>
                <div class="content-header-right col-md-6 col-12"></div>
            </div>
            <div class="content-body pb-5">
                <section id="page-account-settings">
                    <div class="row">
                        <div class="col-md-3 mb-2 mb-md-0">
                            <ul class="nav nav-pills flex-column mt-md-0 mt-1 bg-white shadow-sm">
                                <li class="nav-item">
                                    <a class="nav-link d-flex active" id="account-pill-general" data-toggle="pill" href="#account-vertical-general" aria-expanded="true">
                                        <i class="ft-globe mr-50"></i>
                                        {{ __('Profile Information')}}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link d-flex" id="account-pill-password" data-toggle="pill" href="#account-vertical-password" aria-expanded="false">
                                        <i class="ft-lock mr-50"></i>
                                        {{ __('Update Password')}}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-9">
                            <div class="card">
                                <div class="card-content">
                                    <div class="card-body">
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane active" id="account-vertical-general" aria-labelledby="account-pill-general" aria-expanded="true">
                                                <form id="formUpdate1" autocomplete="off" method="POST" action="{{route('profile.update1')}}">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <label for="first_name">{{ __('First name') }}  <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="first_name" name="first_name" value="{{ old('first_name', auth()->user()->employe->first_name ?? '') }}" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <label for="name">{{ __('Last name') }}  <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="last_name" name="last_name" value="{{ old('name', auth()->user()->employe->last_name ?? '') }}" required>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="email">{{ __('Email') }}  <span class="text-danger">*</span></label>
                                                                <input type="email" class="form-control" id="email" name="email" value="{{ old('email', auth()->user()->email ?? '') }}" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="phone">{{ __('Phone') }}  <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="phone" name="phone" value="{{ old('phone', auth()->user()->employe->phone ?? '') }}" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <label for="languageselect2">{{ __('Languages')}}</label>
                                                                <select class="form-control" id="languageselect2" name="lang">
                                                                    <option value="en" @if (auth()->user()->lang == 'ar') selected @endif>{{ __('Anglais')}}</option>
                                                                    <option value="fr" @if (auth()->user()->lang == 'fr') selected @endif>{{ __('French')}}</option>
                                                                    <option value="ar" @if (auth()->user()->lang == 'de') selected @endif>{{ __('Deutsch')}}</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 d-flex flex-sm-row flex-column justify-content-end">
                                                        <button type="submit" class="btn btn-success mr-sm-1 mb-1 mb-sm-0">{{ __('Save')}}</button>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="tab-pane fade " id="account-vertical-password" role="tabpanel" aria-labelledby="account-pill-password" aria-expanded="false">
                                                <form id="formUpdate3" autocomplete="off" enctype="multipart/form-data" method="POST" action="{{route('profile.update3')}}">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label for="account-old-password">{{ __('Current Password') }}</label>
                                                                    <fieldset class="form-group position-relative">
                                                                        <div class="input-group">
                                                                            <input type="password" class="form-control" id="user-current_password" name="current_password" required>
                                                                            <div class="input-group-append">
                                                                                <span class="input-group-text la la-eye" id="show-hide-current_password"></span>
                                                                            </div>
                                                                        </div>
                                                                    </fieldset>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label for="user-current_password">{{ __('New Password') }}</label>
                                                                    <fieldset class="form-group position-relative">
                                                                        <div class="input-group">
                                                                            <input type="password" class="form-control" id="user-password" name="password" required>
                                                                            <div class="input-group-append">
                                                                                <span class="input-group-text la la-refresh generate-password"></span>
                                                                            </div>
                                                                            <div class="input-group-append">
                                                                                <span class="input-group-text la la-eye" id="show-hide-password"></span>
                                                                            </div>
                                                                        </div>
                                                                    </fieldset>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label for="account-retype-new-password">{{ __('Confirm Password') }}</label>
                                                                    <fieldset class="form-group position-relative">
                                                                        <div class="input-group">
                                                                            <input type="password" class="form-control" id="user-password_confirmation" name="password_confirmation" required>
                                                                            <div class="input-group-append">
                                                                                <span class="input-group-text la la-eye" id="show-hide-password_confirmation"></span>
                                                                            </div>
                                                                        </div>
                                                                    </fieldset>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 d-flex flex-sm-row flex-column justify-content-end">
                                                            <button type="submit" class="btn btn-success mr-sm-1 mb-1 mb-sm-0">{{ __('Save')}}</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script src="{{ asset('js/generate-password.js') }}"></script>
    <script>
        $(document).ready(function() {
            $("#show-hide-password").on('click', function() {
                $(this).toggleClass("la-eye la-eye-slash");
                var input = $("#user-password");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
            });
            $("#show-hide-current_password").on('click', function() {
                $(this).toggleClass("la-eye la-eye-slash");
                var input = $("#user-current_password");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
            });
            $("#show-hide-password_confirmation").on('click', function() {
                $(this).toggleClass("la-eye la-eye-slash");
                var input = $("#user-password_confirmation");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelector(".generate-password").addEventListener("click", function () {
                let newPassword = generatePassword();
                document.getElementById("user-password").value = newPassword;
                document.getElementById("user-password_confirmation").value = newPassword;
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            ajaxForm('#formUpdate1');
            ajaxForm('#formUpdate3');
        });
    </script>
@endpush