@extends('user.layouts.master')

@section('title', __('Profile Info'))

@section('content')
    <div class="nk-content-body mobile-dashboard">

        @include('user.layouts.page-header', ['pageTitle' => __('Profile Info'), 'backRoute' => route('dashboard')])

        <div class="dash-content-area">
            <ul class="dash-nav-tabs">
                @include('user.account.nav-tab')
            </ul>
            <div class="dash-section">
                @if(session('email-sent'))
                    <div class="alert alert-pro alert-success alert-dismissible alert-icon">
                        <em class="icon ni ni-check-circle"></em> 
                        <strong>{{ session('email-sent') }}</strong>
                        <button class="close" data-dismiss="alert"></button>
                    </div>
                @endif
                {!! Panel::profile_alerts('verify_email', ['class' => 'alert-plain', 'type' => 'info', 'link_modal' => '#change-unverified-email', 'link_modal_verify' => '#send-verification-link']) !!}
                {!! Panel::profile_alerts('profile', ['class' => 'alert-plain', 'type' => 'primary', 'link_modal' => '#profile-edit']) !!}

                {{-- Profile Card --}}
                <div class="dash-profile-card">
                    <div class="dash-profile-avatar-wrap">
                        @if(auth()->user()->avatar)
                            <img src="{{ asset('images/avatars/'.auth()->user()->avatar) }}" alt="{{ auth()->user()->display_name }}" class="dash-profile-img">
                        @else
                            <div class="dash-profile-placeholder">{!! user_avatar(auth()->user()) !!}</div>
                        @endif
                    </div>
                    <h5 class="dash-profile-name">{{ auth()->user()->display_name ?? auth()->user()->name }}</h5>
                    <p class="dash-profile-email">{{ auth()->user()->email }}</p>
                    @if(auth()->user()->is_verified || !mandatory_verify())
                        <span class="dash-badge dash-badge--success">{{ __('Verified') }}</span>
                    @else
                        <span class="dash-badge dash-badge--warning">{{ __('Unverified') }}</span>
                    @endif
                </div>

                <h6 class="dash-list-title">{{ __('Personal Information') }}</h6>

                <div class="dash-data-list">
                    <div class="dash-data-item" data-toggle="modal" data-target="#profile-edit">
                        <div class="dash-data-col">
                            <span class="dash-data-label">{{ __('Full Name') }}</span>
                            <span class="dash-data-value">{{ auth()->user()->name }}</span>
                        </div>
                        <svg class="dash-data-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="dash-data-item" data-toggle="modal" data-target="#profile-edit">
                        <div class="dash-data-col">
                            <span class="dash-data-label">{{ __('Display Name') }}</span>
                            <span class="dash-data-value">{{ $metas['profile_display_name'] ?? '' }}</span>
                        </div>
                        <svg class="dash-data-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="dash-data-item">
                        <div class="dash-data-col">
                            <span class="dash-data-label">{{ __('Email') }}</span>
                            <span class="dash-data-value">{{ auth()->user()->email }}</span>
                        </div>
                        <em class="icon ni ni-lock-alt text-soft"></em>
                    </div>
                    <div class="dash-data-item" data-toggle="modal" data-target="#profile-edit">
                        <div class="dash-data-col">
                            <span class="dash-data-label">{{ __('Phone Number') }}</span>
                            <span class="dash-data-value{{ (empty($metas['profile_phone'])) ? ' text-soft' : '' }}">
                                {{ $metas['profile_phone'] ?? __('Not add yet') }}
                            </span>
                        </div>
                        <svg class="dash-data-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="dash-data-item" data-toggle="modal" data-target="#profile-edit">
                        <div class="dash-data-col">
                            <span class="dash-data-label">{{ __('Telegram') }}</span>
                            <span class="dash-data-value{{ (empty($metas['profile_telegram'])) ? ' text-soft' : '' }}">
                                {{ empty($metas['profile_telegram']) ? __('Not added yet') : "@".$metas['profile_telegram'] }}
                            </span>
                        </div>
                        <svg class="dash-data-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="dash-data-item" data-toggle="modal" data-target="#profile-edit">
                        <div class="dash-data-col">
                            <span class="dash-data-label">{{ __('Date of Birth') }}</span>
                            <span class="dash-data-value{{ (empty($metas['profile_dob'])) ? ' text-soft' : '' }}">
                                {{ !empty(data_get($metas, 'profile_dob')) ? show_date($metas['profile_dob'], false, false) : __('Not add yet') }}
                            </span>
                        </div>
                        <svg class="dash-data-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="dash-data-item" data-toggle="modal" data-target="#profile-edit" data-tab-target="#address">
                        <div class="dash-data-col">
                            <span class="dash-data-label">{{ __('Country') }}</span>
                            <span class="dash-data-value{{ (empty($metas['profile_country'])) ? ' text-soft' : '' }}">
                                {{ empty($metas['profile_country']) ? __('Not added yet') : $metas['profile_country'] }}
                            </span>
                        </div>
                        <svg class="dash-data-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="dash-data-item" data-toggle="modal" data-target="#profile-edit" data-tab-target="#address">
                        <div class="dash-data-col">
                            <span class="dash-data-label">{{ __('Address') }}</span>
                            @if(!empty($metas['profile_address_line_1']) || !empty($metas['profile_address_line_2']) || !empty($metas['profile_state']))
                            <span class="dash-data-value">
                                {{ ($metas['profile_address_line_1'] ?? '') . ((!empty($metas['profile_address_line_1']) && !empty($metas['profile_address_line_2'])) ? ', ' : '') . ($metas['profile_address_line_2'] ?? '') }}
                                @if (!empty($metas['profile_state']))
                                    , {{ $metas['profile_state'] }}
                                @endif
                            </span>
                            @else
                            <span class="dash-data-value text-soft">{{ __('Not add yet') }}</span>
                            @endif
                        </div>
                        <svg class="dash-data-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </div>
            </div>
        </div>

        @include('user.layouts.bottom-nav')
    </div>
@endsection

@push('modal')
    {{-- Profile Edit Modal - keeping original modal content intact --}}
    <div class="modal fade" tabindex="-1" role="dialog" id="profile-edit">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="javascript:void(0)" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-body modal-body-lg">
                    <h4 class="title">{{ __('Update Profile') }}</h4>
                    <ul class="nk-nav nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#personal">{{ __('Personal') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#address">{{ __('Address') }}</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="personal">
                            <form action="{{ route('account.profile.personal') }}" method="POST" class="form-validate is-alter form-profile" id="profile-personal-form">
                                @csrf
                                <div class="row gy-4">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-label-group"><label class="form-label" for="full-name">{{ __('Full Name') }} <span class="text-danger">*</span></label></div>
                                            <div class="form-control-wrap"><input type="text" name="name" value="{{ auth()->user()->name }}" class="form-control form-control-lg" id="full-name" placeholder="{{ __('Enter Full name') }}" required maxlength="190"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-label-group"><label class="form-label" for="display-name">{{ __('Nice Name') }} <span class="text-danger">*</span></label></div>
                                            <div class="form-control-wrap"><input type="text" name="profile_display_name" value="{{ $metas['profile_display_name'] ?? '' }}" class="form-control form-control-lg" id="display-name" placeholder="{{ __('Enter display name') }}" required maxlength="190"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-label-group"><label class="form-label" for="phone-no">{{ __('Phone Number') }}</label></div>
                                            <div class="form-control-wrap"><input type="text" name="profile_phone" value="{{ $metas['profile_phone'] ?? '' }}" class="form-control form-control-lg" id="phone-no" placeholder="{{ __('Phone Number') }}"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-label-group"><label class="form-label" for="telegram">{{ __('Telegram') }}</label></div>
                                            <div class="form-control-wrap"><input type="text" name="profile_telegram" value="{{ $metas['profile_telegram'] ?? '' }}" class="form-control form-control-lg" id="telegram" placeholder="{{ __('Telegram') }}"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="birth-day">{{ __('Date of Birth') }}</label>
                                            <input type="text" name="profile_dob" value="{{ $metas['profile_dob'] ?? '' }}" data-date-start-date="-85y" data-date-end-date="-12y" class="form-control form-control-lg date-picker-alt" id="birth-day" placeholder="{{ __('Enter your date of birth') }}">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" name="profile_display_full_name" class="custom-control-input" id="display-full-name"{{ (data_get($metas, 'profile_display_full_name') == 'on') ? ' checked' : '' }}>
                                            <label class="custom-control-label" for="display-full-name">{{ __('Use full name to display') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2 pt-2">
                                            <li><button type="button" id="update-profile" class="btn btn-lg btn-primary">{{ __('Update Profile') }}</button></li>
                                            <li><a href="#" data-dismiss="modal" class="link link-light">{{ __('Cancel') }}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="address">
                            <form action="{{ route('account.profile.address') }}" method="POST" class="form-validate is-alter form-profile" id="profile-address-form">
                                @csrf
                                <div class="row gy-4">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-label-group"><label class="form-label" for="address-l1">{{ __('Address Line 1') }} <span class="text-danger">*</span></label></div>
                                            <div class="form-control-wrap"><input type="text" name="profile_address_line_1" class="form-control form-control-lg" id="address-l1" value="{{ $metas['profile_address_line_1'] ?? '' }}" required maxlength="190"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-label-group"><label class="form-label" for="address-l2">{{ __('Address Line 2') }}</label></div>
                                            <div class="form-control-wrap"><input type="text" name="profile_address_line_2" class="form-control form-control-lg" id="address-l2" value="{{ $metas['profile_address_line_2'] ?? '' }}" maxlength="190"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-label-group"><label class="form-label" for="address-st">{{ __('State') }} <span class="text-danger">*</span></label></div>
                                            <div class="form-control-wrap"><input type="text" name="profile_state" class="form-control form-control-lg" id="address-st" value="{{ $metas['profile_state'] ?? '' }}" required maxlength="190"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="address-county">{{ __('Country') }} <span class="text-danger">*</span></label>
                                            <select name="profile_country" class="form-select" id="address-county" data-ui="lg" data-search="on">
                                                @foreach(config('countries') as $item)
                                                    <option value="{{ $item }}"{{ (isset($metas['profile_country']) && $metas['profile_country'] == $item) ? ' selected' : '' }}>{{ $item }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2 pt-2">
                                            <li><button type="button" id="update-address" class="btn btn-lg btn-primary">{{ __('Update Address') }}</button></li>
                                            <li><a href="#" data-dismiss="modal" class="link link-light">{{ __('Cancel') }}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="change-unverified-email">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-body modal-body-md">
                    <h5 class="title">{{ __('Enter Your Valid Email Address') }}</h5>
                    <form action="{{ route('account.profile.update-unverified-email') }}" method="POST" class="form-validate is-alter mt-4 form-profile" autocomplete="off">
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="email-address">{{ __('Current Email Address') }}</label>
                            <div class="form-control-wrap"><input type="email" class="form-control form-control-lg" id="email-address" readonly value="{{ auth()->user()->email }}"></div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="new-unverified-email-address">{{ __('New Email Address') }}  <span class="text-danger">*</span></label>
                            <div class="form-control-wrap"><input type="email" id="new-unverified-email-address" autocomplete="new-email" name="user_new_unverified_email" class="form-control form-control-lg" placeholder="{{ __('Enter Email Address') }}" required maxlength="190"></div>
                        </div>
                        <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                            <li><button type="submit" id="update-unverified-email" class="btn btn-md btn-primary">{{ __('Send Verification Email') }}</button></li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="send-verification-link">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-body modal-body-md">
                    <h5 class="title">{{ __('Resend Email Verification Link') }}</h5>
                    <form action="{{ route('account.profile.verify-unverified-email', auth()->user()) }}" method="POST" class="form-validate is-alter mt-4">
                        @csrf
                        <div class="form-group">
                            <p class="text-dark fs-16px"><strong>{{ __('Are you sure to proceed with email verification link for your exisiting email?') }}</strong></p>
                        </div>
                        <div class="form-group">
                            <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                <li><button type="submit" class="btn btn-md btn-primary">{{ __('Send Verification Email') }}</button></li>
                            </ul>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
<script type="text/javascript">
    const profileSetting = "{{ route('account.settings.save') }}";
</script>
@endpush