@extends('company_portal.layouts.master')

@section('title','Portal Settings')

@section('header')
	@include('company_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>
            @if(session()->has('success-company-info'))
                <p class="font-medium mb-1 color-green">The company information was successfully updated.</p>
            @endif
        
            <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}} @else{!! old('name') !!} @endif</p>
                    <p class="mb-0 f-16 color-secondary">@if($user->email){{$user->email}} @else{!! old('email') !!} @endif</p>
                </div>
            </div>
            <form action="{{route('settings_update_company_info', ['id' => $user->id])}}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="profile-info mb-4">
                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-6 first">Company</div>
                        <div class="col-6"> <input name="company_name" type="text" class="form-control card_holder ps-4" @if(isset($user_company->company))
                            value="{{$user_company->company}}" @endif></div>
                    </div>

                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-6 first">Contact phone</div>
                        <div class="col-6"><input name="company_phone" type="text" class="form-control card_holder ps-4" @if(isset($user_company->company_phone)) value="{{$user_company->company_phone}}"  @endif autocomplete="off">
                        </div>
                    </div>

                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-6 first">Address Line 1</div>
                        <div class="col-6"> <input name="company_address_first_line" type="text" class="form-control card_holder ps-4" @if(isset($user_company->company_address_first_line)) value="{{$user_company->company_address_first_line}}" @endif autocomplete="off">
                        </div>
                    </div>
                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-6 first">Address Line 2</div>
                        <div class="col-6"><input name="company_address_second_line" type="text" class="form-control card_holder ps-4" @if(isset($user_company->company_address_second_line)) value="{{$user_company->company_address_second_line}}" @endif autocomplete="off">

                        </div>
                    </div>

                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-6 first">City</div>
                        <div class="col-6"><input name="company_address_city" type="text" class="form-control ps-4" @if(isset($user_company->company_address_city))
                            value="{{$user_company->company_address_city}}" @endif></div>
                    </div>
                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-6 first">ZIP</div>
                        <div class="col-6"><input name="company_address_zip" type="text" class="form-control ps-4" @if(isset($user_company->company_address_zip))
                            value="{{$user_company->company_address_zip}}" @endif></div>
                    </div>
                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-6 first">Country</div>
                        <div class="col-6"> <input name="company_address_country" type="text" class="form-control ps-4" @if(isset($user_company->company_address_country))
                            value="{{$user_company->company_address_country}}" @endif></div>
                    </div>
                    <div class="row g-4 mb-4 align-items-center">
                        <div class="col-md-12 offset-md-5 ">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item py-1 ps-4">
                                    {{-- <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#EmailChangeComfirmModal">Save Changes</a> --}}
                                    <button type="submit" class="btn green green-update">Save changes</button>

                                </li>
                                <li class="list-inline-item py-1">
                                    <a href="{{route('company_dashboard')}}" class="btn invert">Discard</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
           
        </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" id="success-msg">
                <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}} @else{!! old('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-email'))
            <p class="font-medium mb-1 mt-3 color-green">The space login information was successfully updated.</p>
            @endif

            @if(session()->has('error'))
                <p class="font-medium mb-2 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_company', ['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">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 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 class=" form-control reset-input-field card_holder mb-3" type="email" name="email" value="@if($user->email){{$user->email}} @else{!! old('email') !!} @endif" placeholder="Enter new email address" 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"><label>Password</label></div>
                            <div class="col-md-7 f-16 color-green"><input type="password" name="" class="form-control" placeholder="Enter Password to change email"></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="#EmailChangeComfirmModal">Save Changes</a> --}}
                                        <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" id="success-msg">
                <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>
                <div class="profile-info mb-5">
                <form method="POST" action="{{ route('change_password_company', ['id' => $user->id]) }}">
                        @csrf
                    <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"  class="form-control card_holder" placeholder="Enter old password">
                                    @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" name="password_confirmation" id="password_confirmation" class="form-control card_holder" placeholder="Confirm New Password">
                                @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> --}}
                                    <button type="submit" class="btn green">Save</button>

                                </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>
                </form>
                </div>
            </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 eye = document.querySelector("#eye1")

        eye.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