@extends('space_portal.layouts.master')

@section('title','Creating the third workspace. Join today')

@section('header')
	@include('space_portal.partials.header')
@endsection

@push('styles')
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
@endpush

@section('content')
<section class="main-container">
    <div class="padding">

        <div class="box-white mb-4">
            <div class="d-flex align-items-start justify-content-start align-items-md-center justify-content-md-between flex-column flex-md-row mb-3 mb-md-0">
                <div class="mb-2 m-md-0">
                    <h1 class="mb-0">Overview</h1>
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex avatar-inline flex-row flex-wrap  align-items-center mb-2 mb-sm-4">
                <div class="single">
                    <div class="avatar">
                        <img src="{{asset('images/reef-logo-rounded.png')}}" alt="#">
                    </div>
                </div>
                <div class="single">
                    <p class="mb-2 f-20 font-medium">@if($user->name){{$user->name}}@endif</p>
                    <p class="mb-0 f-16 color-secondary">@if($user->email){{$user->email}}@endif</p>
                </div>
            </div>            
        </div>

        <div class="box-white">
            <div class="d-flex align-items-start justify-content-start align-items-md-center justify-content-md-between flex-column flex-md-row mb-3 mb-md-0">
                <div>
                    <h1 class="mb-0">Sign In Information</h1>
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex align-items-center justify-content-between">
                <div class="pe-4">
                    <p class="f-20 mb-1 font-medium">Email address</p>
                    <p class="mb-0 f-16 color-secondary">@if($user->email){{$user->email}}@endif</p>
                </div>
                
                <div>
                    <a href="#" class="btn invert" data-bs-toggle="collapse" data-bs-target="#emailaddresscollapse">Change Email</a>
                </div>
                 
            </div>
            @if(session()->has('success'))
            <p class="font-medium mb-1 color-green">The space login information was successfully updated.</p>
            @endif

            @if(session()->has('error'))
                <p class="font-medium mb-1 color-red">Something went wrong, please try again.</p>
            @endif

            <div class="collapse" id="emailaddresscollapse">
                <p class="h4 pt-5 mb-4 ps-0 ps-md-2">Change email adress</p>
                
               
                <form action="{{route('settings_dashboard_update', ['id' => $user->id])}}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="profile-info mb-5">
                        <div class="row gy-1 gx-4 mb-4 align-items-center">
                            <div class="col-md-5 first f-18 text-start text-md-end">Current email address</div>
                            <div class="col-md-7 f-16 color-green">@if($user->email){{$user->email}}@endif</div>
                        </div>

                        <div class="row gy-1 gx-4 mb-4 align-items-center">
                            <div class="col-md-5 first f-18 text-start text-md-end"><label>New email adress</label></div>
                            <div class="col-md-7 f-16 color-green">
                                {{-- <input type="email" name="" class="form-control" placeholder="Enter new email"> --}}
                                <input class="form-control reset-input-field card_holder mb-3" type="email" name="email"  placeholder="Email" autocomplete="off">
                                @if ($errors->has('email'))
                                <div class="alert alert-warning mt-3">
                                    Your email is not confirmed. Please check your inbox.<br>
                                    <a href="javascript:void(0)">Resend confirmation</a>
                                </div>
                                @endif
                            </div>
                        </div>

                        <div class="row gy-1 gx-4 mb-4 align-items-center">
                            <div class="col-md-5 first f-18 text-start text-md-end">Name</div>
                            <div class="col-md-7 f-16 color-green"><input class="form-control reset-input-field card_holder mb-3" type="text" name="name" value="@if($user->name){{$user->name}} @else{!! old('name') !!} @endif" placeholder="Firstname Surname" required>
                                @if ($errors->has('name'))
                                    <span class="help-block error">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif</div>
                        </div>


                        <div class="row g-4 mb-4 align-items-center">
                            <div class="col-md-7 offset-md-5">
                                <ul class="list-inline mb-0">
                                    <li class="list-inline-item py-1">
                                        <button type="submit" class="btn green green-update">Save changes</button>
                                    </li>
                                    <li class="list-inline-item py-1">
                                        <a href="#" class="btn invert" data-bs-toggle="collapse" data-bs-target="#emailaddresscollapse">Discard</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <hr class="my-4">

            <div class="d-flex align-items-center justify-content-between">
                <div class="pe-4">
                    <p class="f-20 mb-1 font-medium">Password</p>
                    <p class="mb-0 f-16 color-secondary">************</p>
                </div>
                <div>
                    <a href="#" class="btn invert" data-bs-toggle="collapse" data-bs-target="#changepasscollapse">Change Password</a>
                </div>
            </div>
            @if(session()->has('success-password'))
            <p class="font-medium mb-1 color-green">The space information was successfully updated.</p>
            @endif

            @if(session()->has('error-password'))
                <p class="font-medium mb-1 color-red">Something went wrong, please try again.</p>
            @endif
            <div class="collapse" id="changepasscollapse">
                <p class="h4 pt-5 mb-4 ps-0 ps-md-2">Change password</p>
                <form method="POST" action="{{ route('change.password', ['id' => $user->id]) }}">
                    @csrf 
                <div class="profile-info mb-5">
                    <div class="row gy-1 gx-4 mb-4 align-items-center">
                        <div class="col-md-5 first f-18 text-start text-md-end"><label>Old Password</label></div>
                        <div class="col-md-7 f-16 color-green">
                            <div class="password-field form-floating">
                                <input type="password" name="old_password" id="old_password" placeholder="Enter old password"  class="form-control card_holder">
                                @if ($errors->has('old_password'))
                                <span class="help-block error">
                                    <strong>{{ $errors->first('old_password') }}</strong>
                                </span>
                                @endif
                                <a href="#" class="show-hide-password" id="eye"><span class="visually-hidden">Show/Hide Password</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="row gy-1 gx-4 mb-4 align-items-center">
                        <div class="col-md-5 first f-18 text-start text-md-end"><label>New Password</label></div>
                        <div class="col-md-7 f-16 color-green">
                            <div class="password-field form-floating">
                                <input type="password" name="password" class="form-control card_holder" id="password" placeholder="Enter New Password">
                                @if ($errors->has('password'))
                                <span class="help-block error">
                                    <strong>{{ $errors->first('password') }}</strong>
                                </span>
                                @endif
                                <a href="#" class="show-hide-password" id="eye1"><span class="visually-hidden">Show/Hide Password</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="row gy-1 gx-4 mb-4 align-items-center">
                        <div class="col-md-5 first f-18 text-start text-md-end"><label>Confirm Password</label></div>
                        <div class="col-md-7 f-16 color-green">
                            <div class="password-field form-floating">
                                <input type="password" placeholder="Confirm New Password" name="password_confirmation" id="password_confirmation" class="form-control card_holder">
                                @if ($errors->has('password_confirmation'))
                                <span class="help-block error">
                                    <strong>{{ $errors->first('password_confirmation') }}</strong>
                                </span>
                                @endif
                                <a href="#" class="show-hide-password" id="eye2"><span class="visually-hidden">Show/Hide Password</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-md-7 offset-md-5">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item py-1">
                                    <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#PasswordChangeComfirmModal">Save Changes</a>
                                    {{-- <div><button type="submit" class="btn save-button p-0 mt-3">Save</button></div> --}}

                                </li>
                                <li class="list-inline-item py-1">
                                    <a href="#" class="btn invert" data-bs-toggle="collapse" data-bs-target="#changepasscollapse">Discard</a>
                                </li>
                            </ul>
                        </div>
                    </div>

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

            <hr class="my-4">

            {{-- <div class="secure-acc-bar">
                <p class="font-medium mb-1">Secure Your Account</p>
                <p class="mb-0 f-14 color-secondary">Two-factor authentication adds an extra layer of security to your account. To log in, in addition you’ll need to provide a 6 digit code.</p>

                <div class="float"><a href="#" class="btn">Enable</a></div>
            </div> --}}
            
        </div>
    </div>
</section>

@endsection



@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init();
</script>
    <script>
        const passwordInput = document.querySelector("#old_password")
        const old_pass_eye = document.querySelector("#eye")

        old_pass_eye.addEventListener("click", function(e){
            e.preventDefault()
            this.classList.toggle("fa-eye-slash")
            const type = passwordInput.getAttribute("type") === "password" ? "text" : "password"
            passwordInput.setAttribute("type", type)
            this.classList.toggle('fa-eye-slash');

        })
    </script>
    <script>
        const passwordInputnew = document.querySelector("#password")
        const eye1 = document.querySelector("#eye1")

        eye1.addEventListener("click", function(e){
            e.preventDefault()
            this.classList.toggle("fa-eye-slash")
            const type = passwordInputnew.getAttribute("type") === "password" ? "text" : "password"
            passwordInputnew.setAttribute("type", type)
            this.classList.toggle('fa-eye-slash');

        })
    </script>

    <script>
        const passwordInput2 = document.querySelector("#password_confirmation")
        const eye2 = document.querySelector("#eye2")
        
        eye2.addEventListener("click", function(e){
            e.preventDefault()
            this.classList.toggle("fa-eye-slash")
            const type = passwordInput2.getAttribute("type") === "password" ? "text" : "password"
            passwordInput2.setAttribute("type", type)
            this.classList.toggle('fa-eye-slash');
        })
    </script>
@endpush