@extends('plugins/real-estate::themes.dashboard.layouts.master')

@section('content')

    <style>
        .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            font-size: 24px;
            color: #333;
            text-align: center;
        }

        .description {
            font-size: 16px;
            color: #555;
            margin: 20px 0;
            text-align: center;
        }

        .buttons {
            display: flex;
            justify-content: center;
        }

        .button:hover {
            opacity: 0.7;
        }

        .note {
            font-size: 14px;
            color: #777;
            margin-top: 20px;
            text-align: center;
        }

        .note strong {
            color: #333;
        }
    </style>


    <x-core::card>
        <x-core::card.header>
            <x-core::tab class="card-header-tabs">
                <x-core::tab.item
                    id="profile-tab"
                    :label="trans('plugins/real-estate::dashboard.sidebar_information')"
                    :is-active="$sectionTab !== 'kyc-document' ? true : false"
                />
                <x-core::tab.item
                    id="avatar-tab"
                    :label="trans('plugins/real-estate::dashboard.profile-picture')"
                />
                <x-core::tab.item
                    id="kyc-tab"
                    :label="trans('plugins/kyc-document::kyc-document.name')"
                    :is-active="$sectionTab === 'kyc-document' ? true : false"
                />
                <x-core::tab.item
                    id="change-password-tab"
                    :label="trans('plugins/real-estate::dashboard.sidebar_change_password')"
                />
                <x-core::tab.item
                    id="uae-pass-tab"
                    :label="trans('plugins/real-estate::dashboard.uae-pass')"
                />
                {!! apply_filters('account_settings_register_content_tabs', null) !!}
            </x-core::tab>
        </x-core::card.header>

        <x-core::card.body>
            <x-core::tab.content>
                <x-core::tab.pane id="profile-tab" :is-active="$sectionTab !== 'kyc-document' ? true : false">
                    {!! $profileForm !!}
                </x-core::tab.pane>
                <x-core::tab.pane id="avatar-tab">
                    <x-core::crop-image
                        :label="trans('plugins/real-estate::dashboard.profile-picture')"
                        name="avatar_file"
                        :value="auth('account')->user()->avatar_url"
                        :action="route('public.account.avatar')"
                    />
                </x-core::tab.pane>
                <x-core::tab.pane id="kyc-tab" :is-active="$sectionTab === 'kyc-document' ? true : false">
                    @include('plugins/kyc-document::themes.partials.user.kyc-document-form', ['user' => $user, 'mimetypes' => $mimetypes])
                </x-core::tab.pane>
                <x-core::tab.pane id="change-password-tab">
                    {!! $changePasswordForm !!}
                </x-core::tab.pane>
                <x-core::tab.pane id="uae-pass-tab">
                    @if(isset($user->uuid))
                        <x-core::form.label class="" for="input-group-file">
                            Profile Name: {{$user->first_name}} {{$user->last_name}}
                        </x-core::form.label>
                        <x-core::form.label class="" for="input-group-file">
                            UEA ID: {{$user->uuid}}
                        </x-core::form.label>
                    @else
                        <div class="container">
                            @if(Session::has('boli_profile_linking'))
                                <div class="alert alert-danger">
                                    <p class="text-danger">{{ Session::get('auth_error_message') }}</p>   
                                </div> <br>
                                @php Session::forget('boli_profile_linking'); @endphp
                            @endif
                            <h1>UAE PASS - Boli Profile Linking</h1>
                            <p class="description">Do you have an online account with <strong>Boli</strong>?</p>
                            <div class="buttons">
                                <a href="{{ route('public.uea-login') }}">
                                    <img src="{{ url('themes\homzen\images\shortcodes\UAEPASS_Connect_to_Btn_Default_Black_Active.png') }}">
                                </a>
                            </div>
                            <p class="note">
                                * Your UAE PASS account will be linked to your existing Boli profile.<br>
                                ** Your Boli profile will be established based on the UAE PASS account.<br>
                                <strong>Note:</strong> This is a one-time process. Your future logins through UAE PASS will be seamless.
                            </p>
                        </div>
                    @endif
                </x-core::tab.pane>
                {!! apply_filters('account_settings_register_content_tab_inside', null) !!}
            </x-core::tab.content>
        </x-core::card.body>
    </x-core::card>
@stop

@push('scripts')
    {!! JsValidator::formRequest(\Botble\RealEstate\Http\Requests\SettingRequest::class) !!}
    {!! JsValidator::formRequest(\Botble\RealEstate\Http\Requests\UpdatePasswordRequest::class) !!}
@endpush