@use('app\Helpers\Helpers')
<div class="col-xxl-3 col-xl-4">
    <div class="profile-wrapper filter-sidebar filter">
        {{-- <i class="iconsax close filter-close" icon-name="add"></i> --}}
        </button>
        {{-- <div class="profile">
            @php
            $profieImg = auth()?->user()?->getFirstMediaUrl('image');
            @endphp
            <div class="profile-img update-img">
                @if (Helpers::isFileExistsFromURL($profieImg))
                <img class="align-self-center profile-image pull-right img-fluid blur-up lazyloaded"
                    src="{{ Helpers::isFileExistsFromURL($profieImg, true) }}" alt="header-user">
                @else
                <span class="profile-name initial-letter">{{ substr(auth()->user()?->name, 0, 1) }}</span>
                @endif
                <button type="button" class="edit-modal" data-bs-toggle="modal" data-bs-target="#personalDetailModal">
                    <i class="iconsax" icon-name="edit-2"></i>
                </button>
            </div>
            <div class="profile-detail">
                <h5>{{ auth()?->user()?->name }}</h5>
                <p><i class="iconsax" icon-name="mail"></i> {{ auth()?->user()?->email }}</p>
            </div>
        </div> --}}
        <div class="profile-settings custom-scroll">
            <nav class="navbar navbar-expand-md p-0">
                <button class="navbar-toggler d-none" type="button" data-bs-toggle="collapse"
                    data-bs-target="#mainnavbarNav">
                    <i class="iconsax" icon-name="mail"></i>
                </button>
                <div class="collapse navbar-collapse" id="mainnavbarNav">
                    <div class="menu-panel">
                        <button data-bs-toggle="collapse" data-bs-target="#mainnavbarNav"
                            class="mainnav-close d-block d-md-none">
                            </i>
                        </button>
                        <ul class="nav nav-tabs menu-wrapper">
                            <li class="nav-item">
                                <a class="nav-link {{ Request::is('account/profile*') ? 'active' : '' }}"
                                    href="{{ route('frontend.account.profile.index') }}">
                                    <i class="iconsax deactivate-icon" icon-name="home-1"></i>
                                    <svg class="active-icon">
                                        <use xlink:href="{{ asset('frontend/images/svg/home-1.svg#home') }}"></use>
                                    </svg>
                                    {{-- <img src="{{ asset('frontend/images/svg/home-1.svg') }}" class="active-icon"
                                        alt="home"> --}}
                                    <span>{{ __('frontend::static.account.dashboard') }}</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ Request::is('account/notification*') ? 'active' : '' }}"
                                    href="{{ route('frontend.account.notification') }}">
                                    <i class="iconsax deactivate-icon" icon-name="bell-1"></i>
                                    <svg class="active-icon">
                                        <use xlink:href="{{ asset('frontend/images/svg/notification.svg#notification') }}"></use>
                                    </svg>
                                    {{-- <img src="{{ asset('frontend/images/svg/notification.svg') }}" class="active-icon"
                                        alt="notification"> --}}
                                    <span>{{ __('frontend::static.account.notifications') }}</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ Request::is('account/wallet*') ? 'active' : '' }}"
                                    href="{{ route('frontend.account.wallet') }}">
                                    <i class="iconsax deactivate-icon" icon-name="wallet-3"></i>
                                    <svg class="active-icon">
                                        <use xlink:href="{{ asset('frontend/images/svg/wallet-3.svg#wallet') }}"></use>
                                    </svg>
                                    {{-- <img src="{{ asset('frontend/images/svg/wallet-3.svg') }}" class="active-icon"
                                        alt="wallet"> --}}
                                    <span>{{ __('frontend::static.account.my_wallet_sidebar') }}</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ Request::is('account/address*') ? 'active' : '' }}"
                                    href="{{ route('frontend.account.address') }}">
                                    <i class="iconsax deactivate-icon" icon-name="location"></i>
                                    <svg class="active-icon">
                                        <use xlink:href="{{ asset('frontend/images/svg/location.svg#location') }}"></use>
                                    </svg>
                                    {{-- <img src="{{ asset('frontend/images/svg/location.svg') }}" class="active-icon"
                                        alt="location"> --}}
                                    <span>{{ __('frontend::static.account.saved_addresses') }}</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link  {{ Request::is('account/review*') ? 'active' : '' }}"
                                    href="{{ route('frontend.account.review') }}">
                                    <i class="iconsax deactivate-icon" icon-name="star"></i>
                                    <svg class="active-icon">
                                        <use xlink:href="{{ asset('frontend/images/svg/star-rate.svg#starRate') }}"></use>
                                    </svg>
                                    {{-- <img src="{{ asset('frontend/images/svg/star-rate.svg') }}" class="active-icon"
                                        alt="star"> --}}
                                    <span>{{ __('frontend::static.account.my_reviews') }}</span>
                                </a>
                            </li>
                            <li class="profile-logout">
                                <a href="{{ route('frontend.logout') }}"
                                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                                    class="nav-link">
                                    <i class="iconsax"
                                        icon-name="logout-1"></i><span>{{ __('frontend::static.account.logout') }}</span>
                                </a>
                                <form action="{{route('frontend.logout')}}" method="POST" class="d-none"
                                    id="logout-form">
                                    @csrf
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</div>

<!-- update personal detail modal -->
<div class="modal fade profile-update-modal" id="personalDetailModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="personalDetailModalLabel">
                    {{ __('frontend::static.account.update_profile') }}</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <i data-feather="x"></i>
                </button>
            </div>
            <form action="{{ route('frontend.account.profile.update') }}" method="POST" id="profileForm"
                enctype="multipart/form-data">
                <div class="modal-body">
                    @method('PUT')
                    @csrf
                    @php
                    $profileImg = auth()?->user()?->getFirstMediaUrl('image');
                    @endphp
                    <div class="update-img">
                        @if (Helpers::isFileExistsFromURL($profileImg))
                        <img class="align-self-center profile-image pull-right img-fluid blur-up lazyloaded"
                            src="{{ Helpers::isFileExistsFromURL($profileImg, true) }}" alt="header-user">
                        @else
                        <span class="profile-name initial-letter">{{ substr(auth()->user()?->name, 0, 1) }}</span>
                        @endif
                        <label class="custom-file-upload">
                            <input type="file" name="image" accept=".jpg, .png, .jpeg" value="{{ old('image') }}">
                            <i class="iconsax update-profile" icon-name="edit-2"></i>
                            @error('image')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </label>
                    </div>
                    <div class="update-detail">
                        <div class="form-group">
                            <label for="name">{{ __('frontend::static.account.name') }}</label>
                            <div class="position-relative">
                                <i class="iconsax" icon-name="user-1"></i>
                                <input class="form-control" id="name"
                                    placeholder="{{ __('frontend::static.account.enter_name') }}" name="name"
                                    type="text" value="{{auth()?->user()?->name}}">
                            </div>
                            @error('name')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="email">{{ __('frontend::static.account.email') }}</label>
                            <div class="position-relative">
                                <i class="iconsax" icon-name="mail"></i>
                                <input class="form-control" id="email"
                                    placeholder="{{ __('frontend::static.account.enter_email') }}" name="email"
                                    type="email" value="{{auth()?->user()?->email}}">
                            </div>
                            @error('email')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="phone">{{ __('static.phone') }} <span
                                    class="required-span">*</span></label>
                            <div class="input-group phone-detail form-group"> 
                                <select class="form-control select-country-code form-control-white d-block order-0"
                                    id="select-country-code" name="code" data-placeholder="1">
                                    @php
                                    $default = old('code', auth()?->user()?->code ?? 1);
                                    @endphp
                                    <option value="" selected></option>
                                    @foreach (App\Helpers\Helpers::getCountryCodes() as $key => $option)
                                    <option class="option" value="{{ $option->phone_code }}"
                                        data-image="{{ asset('admin/images/flags/' . $option->flag) }}"
                                        @if($option->phone_code == $default) selected @endif
                                        data-default="{{ $default }}">
                                        {{ $option->phone_code }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('code')
                                <span class="invalid-feedback d-block d-block order-1" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror

                                <input class="form-control w-auto" type="number" name="phone" id="phone"
                                    value="{{ isset(auth()?->user()->phone) ? auth()?->user()->phone : old('phone') }}"
                                    min="1" placeholder="{{ __('static.serviceman.enter_phone_number') }}">
                            </div>
                            @error('phone')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline" data-bs-dismiss="modal">{{ __('frontend::static.account.cancel') }}</button>
                    <button type="button" class="btn btn-solid"
                        id="submitProfileForm">{{ __('frontend::static.account.update_profile') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- update Change Password modal -->
<div class="modal fade profile-update-modal change-password-modal" id="change-password" data-bs-backdrop="static"
    data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="personalDetailModalLabel">
                    {{ __('frontend::static.account.change_password') }}</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <i data-feather="x"></i>
                </button>
            </div>
            <form action="{{ route('frontend.account.password.update') }}" id="changePasswordForm" method="post">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label for="currentPassword">{{ __('frontend::static.account.current_password') }}</label>
                        <input type="password" id="current_password" class="form-control"
                            placeholder="{{ __('frontend::static.account.enter_current_password') }}"
                            value="{{ old('current_password') }}" autocomplete="off" name="current_password">
                    </div>
                    @error('current_password')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                    <div class="form-group">
                        <label for="password2">{{ __('frontend::static.account.new_password') }}</label>
                        <input class="form-control" id="new_password"
                            placeholder="{{ __('frontend::static.account.enter_new_password') }}" autocomplete="off"
                            value="{{ old('new_password') }}" name="new_password" type="password">
                    </div>
                    @error('new_password')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                    <div class="form-group">
                        <label for="confirmPassword">{{ __('frontend::static.account.confirm_password') }}</label>
                        <input class="form-control" id="confirm_password"
                            placeholder="{{ __('frontend::static.account.enter_confirm_password') }}"
                            name="confirm_password" autocomplete="off" value="{{ old('confirm_password') }}"
                            type="password">
                    </div>
                    @error('confirm_password')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline" data-bs-dismiss="modal">{{ __('frontend::static.account.cancel') }}</button>
                    <button type="submit"
                        class="btn btn-solid">{{ __('frontend::static.account.change_password') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('js')
<script>
(function($) {
    "use strict";
    $(document).ready(function() {
        $("#changePasswordForm").validate({
            ignore: [],
            rules: {
                "current_password": "required",
                "new_password": {
                    required: true
                },
                "confirm_password": {
                    required: true,
                    equalTo: "#new_password"
                },
            },
        });
    });
})(jQuery);
</script>
@endpush