@extends('layouts.master')

@section('title')
    @lang('translation.edit_profile')
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/css/intlTelInput.css">
    <style>
        .iti {
            width: 100% !important;
        }
    </style>
@endsection

@section('content')
    @php
    if (Auth::user()->first_name || Auth::user()->last_name) {
        $full_name = Auth::user()->first_name.' '.Auth::user()->last_name;
    }else{
        $full_name = 'N/A';
    }
    @endphp

    <div class="position-relative mx-n4 mt-n4">
        <div class="profile-wid-bg profile-setting-img">
            <img src="" alt="" class="profile-wid-img" />
        </div>
    </div>

    <div class="row">
        <div class="col-xxl-3">
            <div class="card mt-n5">
                <div class="card-body p-4">
                    <!-- Session Messages -->
                    @include('partials.session')
                    @php $user = Auth::user(); @endphp

                    <!-- Profile Completion Notice -->
                    @if ($user->first_name == null || $user->last_name == null || $user->username == null)
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <strong>Notice:</strong> Fill your personal details to proceed with the account verification!
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <div class="text-center">
                        <div class="profile-user position-relative d-inline-block mx-auto mb-4">
                            {{-- <img src="@if (Auth::user()->profile_picture && Auth::user()->profile_picture != 'avatar-1.jpg') {{ URL::asset('assets/images/users/'.Auth::user()->profile_picture) }} @else {{ URL::asset('images/avatar-1.jpg') }} @endif" class="rounded-circle avatar-xl img-thumbnail user-profile-image">                        </div> --}}
                            @if(Auth::user()->profile_picture && file_exists(public_path('ProfilePicture/' . Auth::user()->profile_picture)))
                                <img src="{{ asset('ProfilePicture/' . Auth::user()->profile_picture) }}" class="rounded-circle avatar-xl img-thumbnail user-profile-image">
                            @else
                                <img src="{{ asset('default_assets/user/default.jpg') }}" class="rounded-circle avatar-xl img-thumbnail user-profile-image">
                            @endif
                        </div>
                        <h5 class="fs-16 mb-1">{{ $full_name }}</h5>
                        <p class="text-muted mb-0">{{ Auth::user()->username ?? 'N/A'}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xxl-9">
            <div class="card mt-xxl-n5">
                <!-- Tabs Start -->
                <div class="card-header">
                    <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                        @php $isGuest = auth()->user()->hasRole(App\Models\User::Guest); @endphp

                        @if(!$isGuest)
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#personalDetails" role="tab">
                                    Personal Details
                                </a>
                            </li>
                        @endif
                        <li class="nav-item">
                            <a class="nav-link {{ $isGuest ? 'active' : '' }}" data-bs-toggle="tab" href="#changePassword" role="tab">
                                Change Password
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#changeProfilePicture" role="tab">
                                Change Profile Pic
                            </a>
                        </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#marketingMails" role="tab">
                                    Notifications Setting
                                </a>
                            </li>
                        @if(!$isGuest)
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#chat_background_image" role="tab">
                                    Chat Background Image
                                </a>
                            </li>
                        @endif
                    </ul>
                </div>

                <div class="card-body p-4">
                    <div class="tab-content">
                        @if(!$isGuest)
                            <!-- Personal Details Tab -->
                            <div class="tab-pane active" id="personalDetails" role="tabpanel">
                                <form method="POST" action="{{ url('/profile/update') }}" id="profileUpdate">
                                    @csrf
                                    <div class="row">
                                        <!-- First Name -->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="First Name" class="form-label">First Name</label>
                                                <input required type="text" class="form-control" name="first_name" placeholder="John" value="{{ $alertUser ? $alertUser->first_name : Auth::user()->first_name }}">
                                            </div>
                                        </div>
                                        <!-- Last Name -->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="Last Name" class="form-label">Last Name</label>
                                                <input required type="text" class="form-control" name="last_name" placeholder="Doe" value="{{ $alertUser ? $alertUser->last_name : Auth::user()->last_name }}">
                                            </div>
                                        </div>
                                        @if(!$alertUser)
                                        <!-- Username -->
                                        <div class="col-lg-6 form-group">
                                            <div class="mb-3">
                                                <label for="Username" class="form-label">Username</label>
                                                <div class="form-icon">
                                                    <input disabled type="text" class="form-control form-control-icon" placeholder="johndoe7" value="{{ Auth::user()->username }}">
                                                    <i class="ri-user-line"></i>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        <!-- Email Address -->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="Email Address" class="form-label">Email Address</label>
                                                <input disabled type="email" class="form-control" placeholder="johndoe7@gmail.com" value="{{ $alertUser ? $alertUser->email : Auth::user()->email }}">
                                            </div>
                                        </div>
                                        @if(!$alertUser)
                                            <!-- Phone Number -->
                                            <div class="mb-3">
                                                <label for="phone_no" class="form-label">Phone Number</label>
                                                <input type="tel" class="form-control @error('phone_no') is-invalid @enderror" id="phone_no" name="phone_no"
                                                       placeholder="Enter phone number" value="{{ Auth::user()->phone_no }}">
                                                <div id="phone-number-error" class="text-danger mt-2" style="display: none;"></div>

                                                @error('phone_no')
                                                <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        @endif
                                        <div class="col-lg-12">
                                            <div class="hstack gap-2 justify-content-end">
                                                <button type="submit" class="btn btn-primary">Update Profile</button>
                                                <a href="{{ url('/profile') }}" class="btn btn-danger">Cancel</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        @endif

                        <!-- Change Password Tab -->
                        <div class="tab-pane {{ $isGuest ? 'active' : '' }}" id="changePassword" role="tabpanel">
                            <form action="{{ url('/profile/update/password') }}" method="POST">
                                @csrf
                                <div class="row g-2">
                                    <!-- New Password -->
                                    <div class="col-lg-6">
                                        <div>
                                            <label for="New Password" class="form-label">New Password</label>
                                            <input required type="password" class="form-control" name="password" placeholder="Enter new password">
                                        </div>
                                    </div>
                                    <!-- Password Confirmation -->
                                    <div class="col-lg-6">
                                        <div>
                                            <label for="Confirm Password" class="form-label">Confirm Password</label>
                                            <input required type="password" class="form-control" name="password_confirmation" placeholder="Confirm password">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="text-end mt-2">
                                            <button type="submit" class="btn btn-primary">Update Password</button>
                                            <a href="{{ url('/profile') }}" class="btn btn-danger">Cancel</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Change Profile Picture Tab -->
                        <div class="tab-pane" id="changeProfilePicture" role="tabpanel">
                            <form action="{{ url('/profile/update/avatar') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row g-2">
                                    <div class="col-lg-12">
                                        <label for="ProfilePicture" class="form-label">Profile Picture</label>
                                        <input required type="file" class="form-control" name="file" accept="image/*">
                                    </div>
                                    <p class="alert alert-info small">
                                        Updating your profile picture will remove the current customized avatar as dp, if set.
                                    </p>
                                    <div class="col-lg-12">
                                        <div class="text-end mt-2">
                                            <button type="submit" class="btn btn-primary">Update Profile Pic</button>
                                            <a href="{{ url('/profile') }}" class="btn btn-danger">Cancel</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                            <!-- Marketing Mails -->
                            <div class="tab-pane" id="marketingMails" role="tabpanel">
                                <form action="{{ url('/profile/marketing/update') }}" method="POST">
                                    @csrf
                                    <div class="row g-2">
                                        <div class="col-lg-12">
                                            @if(!$isGuest)
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="marketingEmails" name="is_marketing_mail_unable" {{ Auth::user()->is_marketing_mail_unable ? 'checked' : '' }}>
                                                <label class="form-check-label" for="marketingEmails">Subscribe to Marketing Emails</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="message_email_notification" name="message_email_notification" {{ Auth::user()->message_email_notification ? 'checked' : '' }}>
                                                <label class="form-check-label" for="message_email_notification">Email Notification for Messages</label>
                                            </div>
                                            @endif
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="sms_opt_in_out"
                                                       name="sms_opt_in_out" {{ Auth::user()->sms_opt_in_out ? 'checked' : '' }}>
                                                <label class="form-check-label" for="sms_opt_in_out">SMS Notifications</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="text-end mt-2">
                                                <button type="submit" class="btn btn-primary">Update</button>
                                                <a href="{{ url('/profile') }}" class="btn btn-danger">Cancel</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            @if(!$isGuest)
                                <!-- Change Background Image -->
                                <div class="tab-pane" id="chat_background_image" role="tabpanel">
                                    <form action="{{ route('profile.background.update.chat') }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row g-2">
                                            <div class="col-lg-12">
                                                <label for="Avatar" class="form-label">Background Image</label>
                                                <input type="file" class="form-control" name="chat_background_image" accept="image/*">
                                            </div>
                                            <div class="my-4">
                                                <img src="{{ asset('chat_background_image/' . Auth::user()->chat_background_image) }}"
                                                     style="width: 300px; height: 300px; object-fit: contain" alt="Background Image">
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="text-end mt-2">
                                                    <button type="submit" class="btn btn-primary">Update Background Image</button>
                                                    <a href="{{ url('/profile') }}" class="btn btn-danger">Cancel</a>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            @endif
                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="{{ URL::asset('assets/js/pages/profile-setting.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Input Mask -->
    <script src="{{ URL::asset('assets/libs/cleave.js/cleave.js.min.js') }}"></script>
    <script src="{{ URL::asset('assets/js/pages/form-masks.init.js') }}"></script>

    <!-- Intl-Tel-Input Script -->
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/js/intlTelInput.min.js"></script>

    <script>
        const phoneInput = document.querySelector("#phone_no");
        const iti = intlTelInput(phoneInput, {
            initialCountry: "us",
            separateDialCode: true,
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/js/utils.js",
        });

        phoneInput.addEventListener("blur", function () {
            const isValid = iti.isValidNumber();
            const errorDiv = document.getElementById("phone-number-error");
            if (phoneInput.value.trim() === "") {
                phoneInput.classList.remove("is-invalid");
                errorDiv.style.display = "none";
            } else if (!isValid) {
                phoneInput.classList.add("is-invalid");
                errorDiv.style.display = "block";
                errorDiv.innerText = "Please enter a valid phone number.";
            } else {
                phoneInput.classList.remove("is-invalid");
                errorDiv.style.display = "none";
            }
        });
        document.getElementById("profileUpdate").addEventListener("submit", function (event) {
            if (iti.isValidNumber()) {
                const fullPhoneNumber = iti.getNumber();
                phoneInput.value = fullPhoneNumber;
            } else if (phoneInput.value.trim() !== "") {
                event.preventDefault();
                const errorDiv = document.getElementById("phone-number-error");
                phoneInput.classList.add("is-invalid");
                errorDiv.style.display = "block";
                errorDiv.innerText = "Please enter a valid phone number.";
            }
        });
    </script>
@endsection