@extends('layouts.user.master')
@section('title')
    @lang('translation.settings')
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet"
          type="text/css"/> {{-- Sweet alert popup--}}
@endsection
@section('content')
    <div class="position-relative mx-n4 mt-n4">
        <div class="profile-wid-bg profile-setting-img">
            @if($user->background_cover != '')
                <img
                    src="{{ URL::asset('storage/images/DBImages/user/profile/cover-profile/' . $user->background_cover) }}"
                    class="profile-wid-img"
                    alt="">
            @else
                <img src="{{ URL::asset('build/images/profile-bg.jpg') }}" class="profile-wid-img" alt="">
            @endif
            <div class="overlay-content">
                <div class="text-end p-3">
                    <div class="p-0 ms-auto rounded-circle profile-photo-edit">
                        <input id="profile-foreground-img-file-input" type="file"
                               class="profile-foreground-img-file-input">
                        <label for="profile-foreground-img-file-input" class="profile-photo-edit btn btn-light">
                            <i class="ri-image-edit-line align-bottom me-1"></i> @lang('profile.change-cover')
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xxl-3">
            <div class="card mt-n5">
                <div class="card-body p-4">
                    <div class="text-center">
                        <div class="profile-user position-relative d-inline-block mx-auto  mb-4">
                            <img
                                src="@if (Auth::user()->avatar != '') {{ URL::asset('build/images/users/' . Auth::user()->avatar) }}@else{{ URL::asset('build/images/users/avatar-1.jpg') }} @endif"
                                class="rounded-circle avatar-xl img-thumbnail user-profile-image"
                                alt="user-profile-image">
                            <div class="avatar-xs p-0 rounded-circle profile-photo-edit">
                                <input id="profile-img-file-input" type="file" class="profile-img-file-input">
                                <label for="profile-img-file-input" class="profile-photo-edit avatar-xs">
                                    <span class="avatar-title rounded-circle bg-light text-body">
                                        <i class="ri-camera-fill"></i>
                                    </span>
                                </label>
                            </div>
                        </div>
                        <h5 class="fs-16 mb-1">{{ $user->username }}</h5>
                        <p class="text-muted mb-0">{{ ucfirst($user->role) }}</p>
                    </div>
                </div>
            </div>
            <!--end card-->
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-5">
                        <div class="flex-grow-1">
                            <h5 class="card-title mb-0">@lang('profile.complete-profile')</h5>
                        </div>
                    </div>
                    <div class="progress animated-progress custom-progress progress-label">
                        <div class="progress-bar bg-primary" role="progressbar"
                             style="width: {{ $profileCompletePercent }}%" aria-valuenow="{{ $profileCompletePercent }}"
                             aria-valuemin="0" aria-valuemax="100">
                            <div class="label">{{ (int)$profileCompletePercent }}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end col-->
        <div class="col-xxl-9">
            <div class="card mt-xxl-n5">
                <div class="card-header">
                    <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#personalDetails" role="tab">
                                <i class="fas fa-home"></i>
                                @lang('profile.personal-details')
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#changePassword" role="tab">
                                <i class="far fa-user"></i>
                                @lang('profile.change-password')
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#privacy" role="tab">
                                <i class="far fa-envelope"></i>
                                @lang('profile.privacy-settings')
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body p-4">
                    <div class="tab-content">
                        <div class="tab-pane active" id="personalDetails" role="tabpanel">
                            <form method="POST" action="{{ route('user.update-profile-details') }}">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label for="firstnameInput"
                                                   class="form-label">@lang('profile.first-name')</label>
                                            <input type="text" class="form-control" id="firstnameInput"
                                                   name="first_name"
                                                   placeholder="@lang('profile.enter-first-name')"
                                                   value="{{ $user->first_name }}">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label for="lastnameInput"
                                                   class="form-label">@lang('profile.last-name')</label>
                                            <input type="text" class="form-control" id="lastnameInput" name="last_name"
                                                   placeholder="@lang('profile.enter-last-name')"
                                                   value="{{ $user->last_name }}">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label for="phonenumberInput"
                                                   class="form-label">@lang('profile.phone-number')</label>
                                            <input type="text" class="form-control" id="phonenumberInput" name="phone"
                                                   placeholder="@lang('profile.enter-phone-number')"
                                                   value="{{ $user->phone }}">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label for="emailInput" class="form-label">@lang('profile.email')</label>
                                            <input type="email" class="form-control" id="emailInput" name="email"
                                                   placeholder="@lang('profile.enter-email')"
                                                   value="{{ $user->email }}">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-12">
                                        <label for="">@lang('profile.role')</label>
                                        <select class="form-select mb-3" aria-label="Default select example"
                                                name="role">
                                            @foreach($roles as $role)
                                                <option
                                                    @if($role == $user->role) selected @endif>{{ ucfirst($role) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-4">
                                        <div class="mb-3">
                                            <label for="cityInput" class="form-label">@lang('profile.city')</label>
                                            <input type="text" class="form-control" id="cityInput" name="city"
                                                   placeholder="@lang('profile.enter-city')"
                                                   value="{{ $user->city }}"/>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-4">
                                        <div class="mb-3">
                                            <label for="countryInput"
                                                   class="form-label">@lang('profile.country')</label>
                                            <input type="text" class="form-control" id="countryInput" name="country"
                                                   placeholder="@lang('profile.enter-country')"
                                                   value="{{ $user->country }}"/>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-4">
                                        <div class="mb-3">
                                            <label for="zipcodeInput"
                                                   class="form-label">@lang('profile.zipcode')</label>
                                            <input type="text" class="form-control" minlength="5" maxlength="6"
                                                   name="zipcode"
                                                   id="zipcodeInput" placeholder="@lang('profile.enter-zipcode')"
                                                   value="{{ $user->zipcode }}">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-12">
                                        <div class="mb-3 pb-2">
                                            <label for="exampleFormControlTextarea"
                                                   class="form-label">@lang('profile.description')</label>
                                            <textarea class="form-control" id="exampleFormControlTextarea"
                                                      name="description"
                                                      placeholder="@lang('profile.enter-description')"
                                                      rows="3">{{ $user->description }}</textarea>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-12">
                                        <div class="hstack gap-2 justify-content-end">
                                            <button type="submit"
                                                    class="btn btn-primary">@lang('profile.update')</button>
                                            <button type="button"
                                                    class="btn btn-soft-secondary">@lang('profile.cancel')</button>
                                        </div>
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end row-->
                            </form>
                        </div>
                        <!--end tab-pane-->
                        <div class="tab-pane" id="changePassword" role="tabpanel">
                            <form method="POST" action="{{ route('user.update-user-password') }}">
                                @csrf
                                <div class="row g-2">
                                    <div class="col-lg-4">
                                        <div>
                                            <label for="oldpasswordInput"
                                                   class="form-label">@lang('profile.old-password')</label>
                                            <input type="password" class="form-control" id="oldpasswordInput"
                                                   name="old_password"
                                                   placeholder="@lang('profile.enter-old-password')">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-4">
                                        <div>
                                            <label for="newpasswordInput"
                                                   class="form-label">@lang('profile.new-password')</label>
                                            <input type="password" class="form-control" id="newpasswordInput"
                                                   name="new_password"
                                                   placeholder="@lang('profile.enter-new-password')">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-4">
                                        <div>
                                            <label for="confirmpasswordInput"
                                                   class="form-label">@lang('profile.confirm-password')</label>
                                            <input type="password" class="form-control" id="confirmpasswordInput"
                                                   name="new_password_confirmation"
                                                   placeholder="@lang('profile.confirm-new-password')">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <a href="javascript:void(0);"
                                               class="link-primary text-decoration-underline">@lang('profile.forgot-password')</a>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-lg-12">
                                        <div class="text-end">
                                            <button type="submit"
                                                    class="btn btn-primary">@lang('profile.confirm-change-password')
                                            </button>
                                        </div>
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end row-->
                            </form>

                            {{-- TODO implement login history here shall be fun--}}
                            <div class="mt-4 mb-3 border-bottom pb-2">
                                <div class="float-end">
                                    <a href="javascript:void(0);" class="link-secondary">All Logout </a>
                                </div>
                                <h5 class="card-title">Login History</h5>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <div class="flex-shrink-0 avatar-sm">
                                    <div class="avatar-title bg-light text-primary rounded-3 fs-18">
                                        <i class="ri-smartphone-line"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6>iPhone 12 Pro</h6>
                                    <p class="text-muted mb-0">Los Angeles, United States - March 16 at
                                        2:47PM</p>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="link-secondary">Logout</a>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <div class="flex-shrink-0 avatar-sm">
                                    <div class="avatar-title bg-light text-primary rounded-3 fs-18">
                                        <i class="ri-tablet-line"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6>Apple iPad Pro</h6>
                                    <p class="text-muted mb-0">Washington, United States - November 06
                                        at 10:43AM</p>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="link-secondary">Logout</a>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <div class="flex-shrink-0 avatar-sm">
                                    <div class="avatar-title bg-light text-primary rounded-3 fs-18">
                                        <i class="ri-smartphone-line"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6>Galaxy S21 Ultra 5G</h6>
                                    <p class="text-muted mb-0">Conneticut, United States - June 12 at
                                        3:24PM</p>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="link-secondary">Logout</a>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 avatar-sm">
                                    <div class="avatar-title bg-light text-primary rounded-3 fs-18">
                                        <i class="ri-macbook-line"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6>Dell Inspiron 14</h6>
                                    <p class="text-muted mb-0">Phoenix, United States - July 26 at
                                        8:10AM</p>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="link-secondary">Logout</a>
                                </div>
                            </div>
                        </div>
                        <!--end tab-pane-->

                        <div class="tab-pane" id="privacy" role="tabpanel">
                            <div class="mb-4 pb-2">
                                <h5 class="card-title text-decoration-underline mb-3">@lang('profile.security')</h5>
                                <div class="d-flex flex-column flex-sm-row mb-4 mb-sm-0">
                                    <div class="flex-grow-1">
                                        <h6 class="fs-14 mb-1">Two-factor Authentication</h6>
                                        <p class="text-muted">Two-factor authentication is an enhanced
                                            security meansur. Once enabled, you'll be required to give
                                            two types of identification when you log into Google
                                            Authentication and SMS are Supported.</p>
                                    </div>
                                    <div class="flex-shrink-0 ms-sm-3">
                                        <a href="javascript:void(0);" class="btn btn-sm btn-primary">Enable Two-facor
                                            Authentication</a>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <h5 class="card-title text-decoration-underline mb-3">@lang('profile.app-notification')</h5>
                                <ul class="list-unstyled mb-0">
                                    <li class="d-flex">
                                        <div class="flex-grow-1">
                                            <label for="directMessage" class="form-check-label fs-14">Direct
                                                messages</label>
                                            <p class="text-muted">Messages from people you follow</p>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                       id="directMessage" checked/>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="d-flex mt-2">
                                        <div class="flex-grow-1">
                                            <label class="form-check-label fs-14" for="desktopNotification">
                                                Show desktop notifications
                                            </label>
                                            <p class="text-muted">Choose the option you want as your
                                                default setting. Block a site: Next to "Not allowed to
                                                send notifications," click Add.</p>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                       id="desktopNotification" checked/>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <form method="POST" action="{{ route('user.delete-account') }}">
                                    @csrf
                                    <h5 class="card-title text-decoration-underline mb-3">@lang('profile.delete-account')</h5>
                                    <p class="text-muted">@lang('profile.delete-account-description')</p>
                                    <div>
                                        <input type="password" class="form-control" id="passwordInput" name="password"
                                               placeholder="@lang('profile.enter-password-delete')"
                                               style="max-width: 265px;">
                                    </div>
                                    <div class="hstack gap-2 mt-3">
                                        <button type="submit"
                                                class="btn btn-soft-primary">@lang('profile.close-delete-account')</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--end tab-pane-->
                    </div>
                </div>
            </div>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
@endsection
@section('script')
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('build/js/pages/profile-setting.init.js') }}"></script>

    <script src="{{ URL::asset('build/js/custom/user-profile/save-banner.js') }}"></script>
    <script src="{{ URL::asset('build/js/custom/user-profile/sweetalert.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            @if (session('success'))
                const success = @json(session('success'));
                updateProfile(success);
            @elseif (session('error'))
                const error = @json(session('error'));
                updateProfileError(error);
            @endif
        });
    </script>

    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection