@extends('website.layouts.app')

@section('content')
    <section id="profile">
        <div class="container-fluid max_width">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-xxl-11 col-lg-11 col-md-12 col-12 pt-lg-1 pt-3">
                    <div class="row d-flex align-items-start">
                        <div class="col-xl-3 col-lg-4 col-md-4 col-12 my-2 my-lg-4">
                            <div class="profile-tab nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                                aria-orientation="vertical">
                                <div class="row d-flex justify-content-center align-items-center mb-lg-5 mb-3">
                                    <div class="col-3">
                                        <div class="profile-dp_top">
                                            <img src="{{ $profile && $profile->profile_photo ? asset('website/uploads/profile_images/' . $profile->profile_photo) : asset('website/images/Group 427319171.png') }}"
                                                alt="" />
                                        </div>
                                    </div>
                                    <div class="col-9">
                                        <div class="profile-title">
                                            <h4 class="mb-0">{{ $profile->real_name ?? 'Your Name' }}</h4>
                                            <span>{{ $profile->country ?? 'Your Country' }}</span>
                                        </div>

                                    </div>
                                </div>



                                <button class="nav-link active" id="v-pills-1-tab" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-1" type="button" role="tab" aria-controls="v-pills-1"
                                    aria-selected="true">
                                    Profile
                                </button>
                                <button class="nav-link" id="v-pills-2-tab" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-2" type="button" role="tab" aria-controls="v-pills-2"
                                    aria-selected="false">
                                    Change Password
                                </button>
                                <button class="nav-link" id="v-pills-3-tab" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-3" type="button" role="tab" aria-controls="v-pills-3"
                                    aria-selected="false">
                                    Subscription Info
                                </button>
                                <a href="{{ route('website.home') }}" class="nav-link">
                                    All Books
                                </a>

                                <button class="nav-link d-flex" id="v-pills-6-tab" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-6" type="button" role="tab" aria-controls="v-pills-6"
                                    aria-selected="false">
                                    Chats <span class="badge  ms-2 mb-1 align-content-center"
                                        style="font-size: 10px; background-color:#8b0000;">{{ $totalChats }}</span>
                                </button>

                                <button class="nav-link" type="button" role="tab" data-bs-toggle="modal"
                                    data-bs-target="#confirmModal">
                                    Logout
                                </button>

                                <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-body">
                                                <div class="login_background py-3">
                                                    <form>
                                                        <div class="row d-flex justify-content-center align-items-center">
                                                            <div class="col-lg-9 col-md-11 col-11">
                                                                <div class="top_header text-center mb-4">
                                                                    <h4>Logout Confirmation</h4>
                                                                    <p class="my-4">
                                                                        Are you sure you want to do Logout?
                                                                    </p>
                                                                </div>
                                                                <div
                                                                    class="row d-flex justify-content-center align-items-center">
                                                                    <div class="col-lg-9 col-md-9 col-11 text-center">
                                                                        <div
                                                                            class="row d-flex justify-content-between align-items-center">
                                                                            <div class="col-lg-6 col-md-6 col-6 text-end">
                                                                                <button type="button"
                                                                                    class="btn submit-btn"
                                                                                    id="confirmLogoutBtn">Confirm</button>
                                                                            </div>
                                                                            <div class="col-lg-6 col-md-6 col-6 text-start">
                                                                                <button type="button"
                                                                                    class="btn cancel-btn"
                                                                                    data-bs-dismiss="modal">Cancel</button>

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button class="nav-link" type="button" role="tab" data-bs-toggle="modal"
                                    data-bs-target="#deleteModal">
                                    Delete Account
                                </button>

                                <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-body">
                                                <div class="login_background py-3">
                                                    <form action="{{ route('account.delete') }}" method="POST">
                                                        @csrf
                                                        @method('DELETE') <!-- Use this for DELETE method -->

                                                        <div class="row d-flex justify-content-center align-items-center">
                                                            <div class="col-lg-11 col-md-11 col-11">
                                                                <div class="top_header text-center mb-4">
                                                                    <h4>Delete Confirmation</h4>
                                                                    <p class="my-4">
                                                                        Are you sure you want to delete your account?
                                                                    </p>
                                                                </div>

                                                                <div
                                                                    class="row d-flex justify-content-center align-items-center">
                                                                    <div class="col-lg-9 col-md-9 col-11 text-center">
                                                                        <div
                                                                            class="row d-flex justify-content-between align-items-center">
                                                                            <div class="col-lg-6 col-md-6 col-6 text-end">
                                                                                <button type="submit" class="submit-btn">
                                                                                    Confirm
                                                                                </button>
                                                                            </div>
                                                                            <div
                                                                                class="col-lg-6 col-md-6 col-6 text-start">
                                                                                <button type="button" class="cancel-btn"
                                                                                    data-bs-dismiss="modal">
                                                                                    Cancel
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

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

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8 col-lg-8 col-md-8 col-12 my-2 my-lg-4">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel"
                                    aria-labelledby="v-pills-1-tab" tabindex="0">
                                    <div class="top_header col-xxl-9 col-lg-11 col-md-12 col-12 mt-4">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h4>Profile</h4>
                                            <p class="note-tip mt-2" onclick="showProfileModal()" data-bs-toggle="modal"
                                                data-bs-target="#profileModal" style="font-size: 14px; cursor:pointer;">
                                                Profile Preview
                                            </p>
                                        </div>

                                    </div>
                                    <!-- Profile Modal -->
                                    <div class="modal fade" id="profileModal" tabindex="-1"
                                        aria-labelledby="profileModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="profileModalLabel">
                                                        Profile Preview - <span id="verificationStatus"
                                                            class="badge bg-secondary text-capitalize" style="text-transform: capitalize !important;"></span>
                                                    </h5>
                                                    {{-- <h5 class="modal-title" id="profileModalLabel">Profile Preview</h5> --}}
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body" id="profileModalBody">
                                                    <!-- Content will be injected here -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <script>
                                        function showProfileModal() {
                                            const modalBody = document.getElementById('profileModalBody');

                                            // Pass PHP data to JS via data attributes or JSON encoding
                                            const profile = @json($profile);

                                            const profileImage = profile.profile_photo ?
                                                `{{ asset('website/uploads/profile_images/') }}/${profile.profile_photo}` :
                                                `{{ asset('images/default-profile.png') }}`;

                                            const verificationBadge = profile.verification_status === 'verified' ?
                                                `<span class="badge badge-success">Verified</span>` :
                                                `<span class="badge badge-warning">Unverified</span>`;

                                            modalBody.innerHTML = `
                                            <div class="row d-flex justify-content-center align-items-center">
                                                <div class="col-xxl-10 col-lg-10 col-md-11 col-12">
                                                    <div class="row gy-3 d-flex justify-content-center align-items-center">
                                                        <div class="col-md-4 detail_book_img text-center">
                                                            <img src="${profileImage}" class="img-fluid rounded" alt="Profile Image">
                                                        </div>
                                                        <div class="col-md-8 text-md-start text-center">
                                                            <p><strong>Status:</strong> ${profile.nickname === 'verified' ? 'Verified' : 'Unverified'}</p>
                                                            <p><strong>Nickname:</strong> ${profile.nickname ?? ''}</p>
                                                            <p><strong>Country:</strong> ${profile.country ?? ''}</p>
                                                            <p><strong>Book:</strong> ${profile.book_name ?? ''}</p>
                                                            <p><strong>Author:</strong> ${profile.author_name ?? ''}</p>
                                                            <p><strong>Short Description:</strong> ${profile.short_description ?? ''}</p>
                                                            <p><strong>Favorite Quote:</strong> ${profile.favorite_quotes ?? ''}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                `;
                                        }
                                    </script> --}}
                                    <script>
                                        function showProfileModal() {
                                            const modalBody = document.getElementById('profileModalBody');
                                            const verificationStatusEl = document.getElementById('verificationStatus');

                                            // Pass PHP data to JS via data attributes or JSON encoding
                                            const profile = @json($profile);

                                            const profileImage = profile.profile_photo ?
                                                `{{ asset('website/uploads/profile_images/') }}/${profile.profile_photo}` :
                                                `{{ asset('images/default-profile.png') }}`;

                                            // Set verification status text and style
                                            const statusText = profile.verification_status ?? 'Unknown';
                                            verificationStatusEl.textContent = statusText;

                                            // Optional: Color coding based on status
                                            verificationStatusEl.className = 'badge';
                                            switch (statusText.toLowerCase()) {
                                                case 'verified':
                                                    verificationStatusEl.classList.add('bg-success');
                                                    break;
                                                case 'unverified':
                                                    verificationStatusEl.classList.add('bg-warning');
                                                    verificationStatusEl.classList.add('text-dark');
                                                    break;
                                                case 'rejected':
                                                    verificationStatusEl.classList.add('bg-danger');
                                                    break;
                                                default:
                                                    verificationStatusEl.classList.add('bg-secondary');
                                            }

                                            modalBody.innerHTML = `
                                                    <div class="row d-flex justify-content-center align-items-center">
                                                        <div class="col-xxl-10 col-lg-10 col-md-11 col-12">
                                                            <div class="row gy-3 d-flex justify-content-center align-items-center">
                                                                <div class="col-md-4 detail_book_img text-center">
                                                                    <img src="${profileImage}" class="img-fluid rounded" alt="Profile Image">
                                                                </div>
                                                                <div class="col-md-8 text-md-start text-center">
                                                                    <p><strong>Nickname:</strong> ${profile.nickname ?? ''}</p>
                                                                    <p><strong>Country:</strong> ${profile.country ?? ''}</p>
                                                                    <p><strong>Book:</strong> ${profile.book_name ?? ''}</p>
                                                                    <p><strong>Author:</strong> ${profile.author_name ?? ''}</p>
                                                                    <p><strong>Short Description:</strong> ${profile.short_description ?? ''}</p>
                                                                    <p><strong>Favorite Quote:</strong> ${profile.favorite_quotes ?? ''}</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                `;
                                        }
                                    </script>
                                    <div class="login_background py-3">
                                        <form id="profilform" action="{{ route('user.profile.store') }}" method="POST"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="row d-flex justify-content-start align-items-center">
                                                <!-- Name -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Name (will not appear on
                                                        profile)*</label>
                                                    <input type="text" name="real_name" id="real_name"
                                                        class="form-control" placeholder="Enter your name"
                                                        value="{{ old('real_name', $profile->real_name ?? '') }}" />
                                                    <div class="invalid-feedback"></div>
                                                </div>

                                                <!-- Nickname -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Nickname (will appear on
                                                        profile)*</label>
                                                    <input type="text" name="nickname" id="nickname"
                                                        class="form-control" placeholder="Enter your nickname"
                                                        value="{{ old('nickname', $profile->nickname ?? '') }}" />
                                                    <div class="invalid-feedback"></div>

                                                </div>

                                                <!-- Phone -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Phone (Verify) (will not appear on
                                                        profile)*</label>
                                                    <div class="mb-3">
                                                        <div class="form-select-container_2 position-relative">
                                                            @php
                                                                $selectedCode = old(
                                                                    'phone_country_code',
                                                                    $profile->phone_country_code ?? '',
                                                                );
                                                            @endphp

                                                            <select class="form-select" id="phone_country_code"
                                                                name="phone_country_code">
                                                                @php
                                                                    $countryCodes = [
                                                                        ['code' => '+93', 'short' => 'AF'], // Afghanistan
                                                                        ['code' => '+355', 'short' => 'AL'], // Albania
                                                                        ['code' => '+213', 'short' => 'DZ'], // Algeria
                                                                        ['code' => '+376', 'short' => 'AD'], // Andorra
                                                                        ['code' => '+244', 'short' => 'AO'], // Angola
                                                                        ['code' => '+1-268', 'short' => 'AG'], // Antigua and Barbuda
                                                                        ['code' => '+54', 'short' => 'AR'], // Argentina
                                                                        ['code' => '+374', 'short' => 'AM'], // Armenia
                                                                        ['code' => '+61', 'short' => 'AU'], // Australia
                                                                        ['code' => '+43', 'short' => 'AT'], // Austria
                                                                        ['code' => '+994', 'short' => 'AZ'], // Azerbaijan
                                                                        ['code' => '+1-242', 'short' => 'BS'], // Bahamas
                                                                        ['code' => '+973', 'short' => 'BH'], // Bahrain
                                                                        ['code' => '+880', 'short' => 'BD'], // Bangladesh
                                                                        ['code' => '+1-246', 'short' => 'BB'], // Barbados
                                                                        ['code' => '+375', 'short' => 'BY'], // Belarus
                                                                        ['code' => '+32', 'short' => 'BE'], // Belgium
                                                                        ['code' => '+501', 'short' => 'BZ'], // Belize
                                                                        ['code' => '+229', 'short' => 'BJ'], // Benin
                                                                        ['code' => '+975', 'short' => 'BT'], // Bhutan
                                                                        ['code' => '+591', 'short' => 'BO'], // Bolivia
                                                                        ['code' => '+387', 'short' => 'BA'], // Bosnia and Herzegovina
                                                                        ['code' => '+267', 'short' => 'BW'], // Botswana
                                                                        ['code' => '+55', 'short' => 'BR'], // Brazil
                                                                        ['code' => '+673', 'short' => 'BN'], // Brunei
                                                                        ['code' => '+359', 'short' => 'BG'], // Bulgaria
                                                                        ['code' => '+226', 'short' => 'BF'], // Burkina Faso
                                                                        ['code' => '+257', 'short' => 'BI'], // Burundi
                                                                        ['code' => '+238', 'short' => 'CV'], // Cabo Verde
                                                                        ['code' => '+855', 'short' => 'KH'], // Cambodia
                                                                        ['code' => '+237', 'short' => 'CM'], // Cameroon
                                                                        ['code' => '+1', 'short' => 'CA'], // Canada
                                                                        ['code' => '+236', 'short' => 'CF'], // Central African Republic
                                                                        ['code' => '+235', 'short' => 'TD'], // Chad
                                                                        ['code' => '+56', 'short' => 'CL'], // Chile
                                                                        ['code' => '+86', 'short' => 'CN'], // China
                                                                        ['code' => '+57', 'short' => 'CO'], // Colombia
                                                                        ['code' => '+269', 'short' => 'KM'], // Comoros
                                                                        ['code' => '+242', 'short' => 'CG'], // Congo (Congo-Brazzaville)
                                                                        ['code' => '+506', 'short' => 'CR'], // Costa Rica
                                                                        ['code' => '+385', 'short' => 'HR'], // Croatia
                                                                        ['code' => '+53', 'short' => 'CU'], // Cuba
                                                                        ['code' => '+357', 'short' => 'CY'], // Cyprus
                                                                        ['code' => '+420', 'short' => 'CZ'], // Czechia
                                                                        ['code' => '+243', 'short' => 'CD'], // Democratic Republic of the Congo
                                                                        ['code' => '+45', 'short' => 'DK'], // Denmark
                                                                        ['code' => '+253', 'short' => 'DJ'], // Djibouti
                                                                        ['code' => '+1-767', 'short' => 'DM'], // Dominica
                                                                        [
                                                                            'code' => '+1-809, +1-829, +1-849',
                                                                            'short' => 'DO',
                                                                        ], // Dominican Republic
                                                                        ['code' => '+593', 'short' => 'EC'], // Ecuador
                                                                        ['code' => '+20', 'short' => 'EG'], // Egypt
                                                                        ['code' => '+503', 'short' => 'SV'], // El Salvador
                                                                        ['code' => '+240', 'short' => 'GQ'], // Equatorial Guinea
                                                                        ['code' => '+291', 'short' => 'ER'], // Eritrea
                                                                        ['code' => '+372', 'short' => 'EE'], // Estonia
                                                                        ['code' => '+268', 'short' => 'SZ'], // Eswatini
                                                                        ['code' => '+251', 'short' => 'ET'], // Ethiopia
                                                                        ['code' => '+679', 'short' => 'FJ'], // Fiji
                                                                        ['code' => '+358', 'short' => 'FI'], // Finland
                                                                        ['code' => '+33', 'short' => 'FR'], // France
                                                                        ['code' => '+241', 'short' => 'GA'], // Gabon
                                                                        ['code' => '+220', 'short' => 'GM'], // Gambia
                                                                        ['code' => '+995', 'short' => 'GE'], // Georgia
                                                                        ['code' => '+49', 'short' => 'DE'], // Germany
                                                                        ['code' => '+233', 'short' => 'GH'], // Ghana
                                                                        ['code' => '+30', 'short' => 'GR'], // Greece
                                                                        ['code' => '+1-473', 'short' => 'GD'], // Grenada
                                                                        ['code' => '+502', 'short' => 'GT'], // Guatemala
                                                                        ['code' => '+224', 'short' => 'GN'], // Guinea
                                                                        ['code' => '+245', 'short' => 'GW'], // Guinea-Bissau
                                                                        ['code' => '+592', 'short' => 'GY'], // Guyana
                                                                        ['code' => '+509', 'short' => 'HT'], // Haiti
                                                                        ['code' => '+504', 'short' => 'HN'], // Honduras
                                                                        ['code' => '+36', 'short' => 'HU'], // Hungary
                                                                        ['code' => '+354', 'short' => 'IS'], // Iceland
                                                                        ['code' => '+91', 'short' => 'IN'], // India
                                                                        ['code' => '+62', 'short' => 'ID'], // Indonesia
                                                                        ['code' => '+98', 'short' => 'IR'], // Iran
                                                                        ['code' => '+964', 'short' => 'IQ'], // Iraq
                                                                        ['code' => '+353', 'short' => 'IE'], // Ireland
                                                                        ['code' => '+972', 'short' => 'IL'], // Israel
                                                                        ['code' => '+39', 'short' => 'IT'], // Italy
                                                                        ['code' => '+1-876', 'short' => 'JM'], // Jamaica
                                                                        ['code' => '+81', 'short' => 'JP'], // Japan
                                                                        ['code' => '+962', 'short' => 'JO'], // Jordan
                                                                        ['code' => '+7', 'short' => 'KZ'], // Kazakhstan
                                                                        ['code' => '+254', 'short' => 'KE'], // Kenya
                                                                        ['code' => '+686', 'short' => 'KI'], // Kiribati
                                                                        ['code' => '+965', 'short' => 'KW'], // Kuwait
                                                                        ['code' => '+996', 'short' => 'KG'], // Kyrgyzstan
                                                                        ['code' => '+856', 'short' => 'LA'], // Laos
                                                                        ['code' => '+371', 'short' => 'LV'], // Latvia
                                                                        ['code' => '+961', 'short' => 'LB'], // Lebanon
                                                                        ['code' => '+266', 'short' => 'LS'], // Lesotho
                                                                        ['code' => '+231', 'short' => 'LR'], // Liberia
                                                                        ['code' => '+218', 'short' => 'LY'], // Libya
                                                                        ['code' => '+423', 'short' => 'LI'], // Liechtenstein
                                                                        ['code' => '+370', 'short' => 'LT'], // Lithuania
                                                                        ['code' => '+352', 'short' => 'LU'], // Luxembourg
                                                                        ['code' => '+261', 'short' => 'MG'], // Madagascar
                                                                        ['code' => '+265', 'short' => 'MW'], // Malawi
                                                                        ['code' => '+60', 'short' => 'MY'], // Malaysia
                                                                        ['code' => '+960', 'short' => 'MV'], // Maldives
                                                                        ['code' => '+223', 'short' => 'ML'], // Mali
                                                                        ['code' => '+356', 'short' => 'MT'], // Malta
                                                                        ['code' => '+692', 'short' => 'MH'], // Marshall Islands
                                                                        ['code' => '+222', 'short' => 'MR'], // Mauritania
                                                                        ['code' => '+230', 'short' => 'MU'], // Mauritius
                                                                        ['code' => '+52', 'short' => 'MX'], // Mexico
                                                                        ['code' => '+691', 'short' => 'FM'], // Micronesia
                                                                        ['code' => '+373', 'short' => 'MD'], // Moldova
                                                                        ['code' => '+377', 'short' => 'MC'], // Monaco
                                                                        ['code' => '+976', 'short' => 'MN'], // Mongolia
                                                                        ['code' => '+382', 'short' => 'ME'], // Montenegro
                                                                        ['code' => '+212', 'short' => 'MA'], // Morocco
                                                                        ['code' => '+258', 'short' => 'MZ'], // Mozambique
                                                                        ['code' => '+95', 'short' => 'MM'], // Myanmar
                                                                        ['code' => '+264', 'short' => 'NA'], // Namibia
                                                                        ['code' => '+674', 'short' => 'NR'], // Nauru
                                                                        ['code' => '+977', 'short' => 'NP'], // Nepal
                                                                        ['code' => '+31', 'short' => 'NL'], // Netherlands
                                                                        ['code' => '+64', 'short' => 'NZ'], // New Zealand
                                                                        ['code' => '+505', 'short' => 'NI'], // Nicaragua
                                                                        ['code' => '+227', 'short' => 'NE'], // Niger
                                                                        ['code' => '+234', 'short' => 'NG'], // Nigeria
                                                                        ['code' => '+850', 'short' => 'KP'], // North Korea
                                                                        ['code' => '+389', 'short' => 'MK'], // North Macedonia
                                                                        ['code' => '+47', 'short' => 'NO'], // Norway
                                                                        ['code' => '+968', 'short' => 'OM'], // Oman
                                                                        ['code' => '+92', 'short' => 'PK'], // Pakistan
                                                                        ['code' => '+680', 'short' => 'PW'], // Palau
                                                                        ['code' => '+970', 'short' => 'PS'], // Palestine
                                                                        ['code' => '+507', 'short' => 'PA'], // Panama
                                                                        ['code' => '+675', 'short' => 'PG'], // Papua New Guinea
                                                                        ['code' => '+595', 'short' => 'PY'], // Paraguay
                                                                        ['code' => '+51', 'short' => 'PE'], // Peru
                                                                        ['code' => '+63', 'short' => 'PH'], // Philippines
                                                                        ['code' => '+48', 'short' => 'PL'], // Poland
                                                                        ['code' => '+351', 'short' => 'PT'], // Portugal
                                                                        ['code' => '+974', 'short' => 'QA'], // Qatar
                                                                        ['code' => '+40', 'short' => 'RO'], // Romania
                                                                        ['code' => '+7', 'short' => 'RU'], // Russia
                                                                        ['code' => '+250', 'short' => 'RW'], // Rwanda
                                                                        ['code' => '+1-869', 'short' => 'KN'], // Saint Kitts and Nevis
                                                                        ['code' => '+1-758', 'short' => 'LC'], // Saint Lucia
                                                                        ['code' => '+1-784', 'short' => 'VC'], // Saint Vincent and the Grenadines
                                                                        ['code' => '+685', 'short' => 'WS'], // Samoa
                                                                        ['code' => '+378', 'short' => 'SM'], // San Marino
                                                                        ['code' => '+239', 'short' => 'ST'], // Sao Tome and Principe
                                                                        ['code' => '+966', 'short' => 'SA'], // Saudi Arabia
                                                                        ['code' => '+221', 'short' => 'SN'], // Senegal
                                                                        ['code' => '+381', 'short' => 'RS'], // Serbia
                                                                        ['code' => '+248', 'short' => 'SC'], // Seychelles
                                                                        ['code' => '+232', 'short' => 'SL'], // Sierra Leone
                                                                        ['code' => '+65', 'short' => 'SG'], // Singapore
                                                                        ['code' => '+421', 'short' => 'SK'], // Slovakia
                                                                        ['code' => '+386', 'short' => 'SI'], // Slovenia
                                                                        ['code' => '+677', 'short' => 'SB'], // Solomon Islands
                                                                        ['code' => '+252', 'short' => 'SO'], // Somalia
                                                                        ['code' => '+27', 'short' => 'ZA'], // South Africa
                                                                        ['code' => '+82', 'short' => 'KR'], // South Korea
                                                                        ['code' => '+211', 'short' => 'SS'], // South Sudan
                                                                        ['code' => '+34', 'short' => 'ES'], // Spain
                                                                        ['code' => '+94', 'short' => 'LK'], // Sri Lanka
                                                                        ['code' => '+249', 'short' => 'SD'], // Sudan
                                                                        ['code' => '+597', 'short' => 'SR'], // Suriname
                                                                        ['code' => '+46', 'short' => 'SE'], // Sweden
                                                                        ['code' => '+41', 'short' => 'CH'], // Switzerland
                                                                        ['code' => '+963', 'short' => 'SY'], // Syria
                                                                        ['code' => '+886', 'short' => 'TW'], // Taiwan
                                                                        ['code' => '+992', 'short' => 'TJ'], // Tajikistan
                                                                        ['code' => '+255', 'short' => 'TZ'], // Tanzania
                                                                        ['code' => '+66', 'short' => 'TH'], // Thailand
                                                                        ['code' => '+670', 'short' => 'TL'], // Timor-Leste
                                                                        ['code' => '+228', 'short' => 'TG'], // Togo
                                                                        ['code' => '+676', 'short' => 'TO'], // Tonga
                                                                        ['code' => '+1-868', 'short' => 'TT'], // Trinidad and Tobago
                                                                        ['code' => '+216', 'short' => 'TN'], // Tunisia
                                                                        ['code' => '+90', 'short' => 'TR'], // Turkey
                                                                        ['code' => '+993', 'short' => 'TM'], // Turkmenistan
                                                                        ['code' => '+688', 'short' => 'TV'], // Tuvalu
                                                                        ['code' => '+256', 'short' => 'UG'], // Uganda
                                                                        ['code' => '+380', 'short' => 'UA'], // Ukraine
                                                                        ['code' => '+971', 'short' => 'AE'], // United Arab Emirates
                                                                        ['code' => '+44', 'short' => 'GB'], // United Kingdom
                                                                        ['code' => '+1', 'short' => 'US'], // United States
                                                                        ['code' => '+598', 'short' => 'UY'], // Uruguay
                                                                        ['code' => '+998', 'short' => 'UZ'], // Uzbekistan
                                                                        ['code' => '+678', 'short' => 'VU'], // Vanuatu
                                                                        ['code' => '+379', 'short' => 'VA'], // Vatican City
                                                                        ['code' => '+58', 'short' => 'VE'], // Venezuela
                                                                        ['code' => '+84', 'short' => 'VN'], // Vietnam
                                                                        ['code' => '+967', 'short' => 'YE'], // Yemen
                                                                        ['code' => '+260', 'short' => 'ZM'], // Zambia
                                                                        ['code' => '+263', 'short' => 'ZW'], // Zimbabwe
                                                                    ];
                                                                @endphp

                                                                @foreach ($countryCodes as $country)
                                                                    <option value="{{ $country['code'] }}"
                                                                        {{ isset($selectedCode) && $selectedCode == $country['code'] ? 'selected' : '' }}>
                                                                        {{ $country['short'] }} ({{ $country['code'] }})
                                                                    </option>
                                                                @endforeach
                                                            </select>


                                                            <div class="divider">|</div>
                                                            <input type="tel" class="form-control"
                                                                name="phone_number" id="phone_number"
                                                                placeholder="Phone number"
                                                                value="{{ old('phone_number', $profile->phone_number ?? '') }}">

                                                        </div>
                                                        <div class="invalid-feedback"></div>
                                                    </div>
                                                </div>

                                                <!-- Profile Photo -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <div class="top_header mt-4">
                                                        <h4>Profile Photo*</h4>
                                                    </div>
                                                    <div class="profile-card text-center">
                                                        <div class="d-flex justify-content-end align-items-center mb-4">
                                                            @if ($profile?->verification_status === 'verified')
                                                                <span class="badge bg-success">Verified</span>
                                                            @else
                                                                <span class="badge bg-warning text-dark">Unverified</span>
                                                            @endif



                                                        </div>
                                                        <div class="profile-photo">
                                                            <img id="profile_preview"
                                                                src="{{ $profile && $profile->profile_photo ? asset('website/uploads/profile_images/' . $profile->profile_photo) : asset('website/images/big-dp.png') }}"
                                                                alt="Profile Photo"
                                                                data-existing-photo="{{ $profile->profile_photo ?? '' }}" />
                                                            <input type="file" name="profile_photo" id="profile_photo"
                                                                hidden>
                                                            <div class="invalid-feedback"></div>
                                                        </div>

                                                        <div
                                                            class="row d-flex justify-content-start align-items-start border-top pt-3">
                                                            <div class="col-1">
                                                                <div class="action-icon text-start trigger-upload"
                                                                    style="cursor: pointer;">
                                                                    <img src="{{ asset('website/images/pencil.png') }}"
                                                                        alt="" />
                                                                    <p>Edit</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-9 text-start">
                                                                <div class="action-icon trigger-upload"
                                                                    style="cursor: pointer;">
                                                                    <img src="{{ asset('website/images/camera enhance.png') }}"
                                                                        alt="" class="ps-4 img-fluid" />
                                                                    <p>Add Photo</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-2">
                                                                <div class="action-icon delete-photo"
                                                                    style="cursor: pointer;">
                                                                    <img src="{{ asset('website/images/bin.png') }}"
                                                                        alt="" />
                                                                    <p>Delete</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Gender -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Gender*</label>
                                                    @php
                                                        $selectedGender = old('gender', $profile->gender ?? '');
                                                    @endphp

                                                    <select name="gender" id="gender" class="form-select">
                                                        <option value="">Select Your Gender</option>
                                                        <option value="female"
                                                            {{ $selectedGender == 'female' ? 'selected' : '' }}>Female
                                                        </option>
                                                        <option value="male"
                                                            {{ $selectedGender == 'male' ? 'selected' : '' }}>Male</option>
                                                        <option value="others"
                                                            {{ $selectedGender == 'others' ? 'selected' : '' }}>Others
                                                        </option>
                                                    </select>
                                                    <div class="invalid-feedback"></div>
                                                </div>

                                                <!-- Country -->
                                                <div class="mb-lg-1 mb-1 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Country*</label>

                                                    @php
                                                        $selectedCountry = old('country', $profile->country ?? '');

                                                        $countries = [
                                                            'Afghanistan' => 'Afghanistan',
                                                            'Albania' => 'Albania',
                                                            'Algeria' => 'Algeria',
                                                            'Andorra' => 'Andorra',
                                                            'Angola' => 'Angola',
                                                            'Antigua and Barbuda' => 'Antigua and Barbuda',
                                                            'Argentina' => 'Argentina',
                                                            'Armenia' => 'Armenia',
                                                            'Australia' => 'Australia',
                                                            'Austria' => 'Austria',
                                                            'Azerbaijan' => 'Azerbaijan',
                                                            'Bahamas' => 'Bahamas',
                                                            'Bahrain' => 'Bahrain',
                                                            'Bangladesh' => 'Bangladesh',
                                                            'Barbados' => 'Barbados',
                                                            'Belarus' => 'Belarus',
                                                            'Belgium' => 'Belgium',
                                                            'Belize' => 'Belize',
                                                            'Benin' => 'Benin',
                                                            'Bhutan' => 'Bhutan',
                                                            'Bolivia' => 'Bolivia',
                                                            'Bosnia and Herzegovina' => 'Bosnia and Herzegovina',
                                                            'Botswana' => 'Botswana',
                                                            'Brazil' => 'Brazil',
                                                            'Brunei' => 'Brunei',
                                                            'Bulgaria' => 'Bulgaria',
                                                            'Burkina Faso' => 'Burkina Faso',
                                                            'Burundi' => 'Burundi',
                                                            'Cabo Verde' => 'Cabo Verde',
                                                            'Cambodia' => 'Cambodia',
                                                            'Cameroon' => 'Cameroon',
                                                            'Canada' => 'Canada',
                                                            'Central African Republic' => 'Central African Republic',
                                                            'Chad' => 'Chad',
                                                            'Chile' => 'Chile',
                                                            'China' => 'China',
                                                            'Colombia' => 'Colombia',
                                                            'Comoros' => 'Comoros',
                                                            'Congo (Congo-Brazzaville)' => 'Congo (Congo-Brazzaville)',
                                                            'Costa Rica' => 'Costa Rica',
                                                            'Croatia' => 'Croatia',
                                                            'Cuba' => 'Cuba',
                                                            'Cyprus' => 'Cyprus',
                                                            'Czechia' => 'Czechia',
                                                            'Democratic Republic of the Congo' =>
                                                                'Democratic Republic of the Congo',
                                                            'Denmark' => 'Denmark',
                                                            'Djibouti' => 'Djibouti',
                                                            'Dominica' => 'Dominica',
                                                            'Dominican Republic' => 'Dominican Republic',
                                                            'Ecuador' => 'Ecuador',
                                                            'Egypt' => 'Egypt',
                                                            'El Salvador' => 'El Salvador',
                                                            'Equatorial Guinea' => 'Equatorial Guinea',
                                                            'Eritrea' => 'Eritrea',
                                                            'Estonia' => 'Estonia',
                                                            'Eswatini' => 'Eswatini',
                                                            'Ethiopia' => 'Ethiopia',
                                                            'Fiji' => 'Fiji',
                                                            'Finland' => 'Finland',
                                                            'France' => 'France',
                                                            'Gabon' => 'Gabon',
                                                            'Gambia' => 'Gambia',
                                                            'Georgia' => 'Georgia',
                                                            'Germany' => 'Germany',
                                                            'Ghana' => 'Ghana',
                                                            'Greece' => 'Greece',
                                                            'Grenada' => 'Grenada',
                                                            'Guatemala' => 'Guatemala',
                                                            'Guinea' => 'Guinea',
                                                            'Guinea-Bissau' => 'Guinea-Bissau',
                                                            'Guyana' => 'Guyana',
                                                            'Haiti' => 'Haiti',
                                                            'Honduras' => 'Honduras',
                                                            'Hungary' => 'Hungary',
                                                            'Iceland' => 'Iceland',
                                                            'India' => 'India',
                                                            'Indonesia' => 'Indonesia',
                                                            'Iran' => 'Iran',
                                                            'Iraq' => 'Iraq',
                                                            'Ireland' => 'Ireland',
                                                            'Israel' => 'Israel',
                                                            'Italy' => 'Italy',
                                                            'Jamaica' => 'Jamaica',
                                                            'Japan' => 'Japan',
                                                            'Jordan' => 'Jordan',
                                                            'Kazakhstan' => 'Kazakhstan',
                                                            'Kenya' => 'Kenya',
                                                            'Kiribati' => 'Kiribati',
                                                            'Kuwait' => 'Kuwait',
                                                            'Kyrgyzstan' => 'Kyrgyzstan',
                                                            'Laos' => 'Laos',
                                                            'Latvia' => 'Latvia',
                                                            'Lebanon' => 'Lebanon',
                                                            'Lesotho' => 'Lesotho',
                                                            'Liberia' => 'Liberia',
                                                            'Libya' => 'Libya',
                                                            'Liechtenstein' => 'Liechtenstein',
                                                            'Lithuania' => 'Lithuania',
                                                            'Luxembourg' => 'Luxembourg',
                                                            'Madagascar' => 'Madagascar',
                                                            'Malawi' => 'Malawi',
                                                            'Malaysia' => 'Malaysia',
                                                            'Maldives' => 'Maldives',
                                                            'Mali' => 'Mali',
                                                            'Malta' => 'Malta',
                                                            'Marshall Islands' => 'Marshall Islands',
                                                            'Mauritania' => 'Mauritania',
                                                            'Mauritius' => 'Mauritius',
                                                            'Mexico' => 'Mexico',
                                                            'Micronesia' => 'Micronesia',
                                                            'Moldova' => 'Moldova',
                                                            'Monaco' => 'Monaco',
                                                            'Mongolia' => 'Mongolia',
                                                            'Montenegro' => 'Montenegro',
                                                            'Morocco' => 'Morocco',
                                                            'Mozambique' => 'Mozambique',
                                                            'Myanmar' => 'Myanmar',
                                                            'Namibia' => 'Namibia',
                                                            'Nauru' => 'Nauru',
                                                            'Nepal' => 'Nepal',
                                                            'Netherlands' => 'Netherlands',
                                                            'New Zealand' => 'New Zealand',
                                                            'Nicaragua' => 'Nicaragua',
                                                            'Niger' => 'Niger',
                                                            'Nigeria' => 'Nigeria',
                                                            'North Korea' => 'North Korea',
                                                            'North Macedonia' => 'North Macedonia',
                                                            'Norway' => 'Norway',
                                                            'Oman' => 'Oman',
                                                            'Pakistan' => 'Pakistan',
                                                            'Palau' => 'Palau',
                                                            'Palestine' => 'Palestine',
                                                            'Panama' => 'Panama',
                                                            'Papua New Guinea' => 'Papua New Guinea',
                                                            'Paraguay' => 'Paraguay',
                                                            'Peru' => 'Peru',
                                                            'Philippines' => 'Philippines',
                                                            'Poland' => 'Poland',
                                                            'Portugal' => 'Portugal',
                                                            'Qatar' => 'Qatar',
                                                            'Romania' => 'Romania',
                                                            'Russia' => 'Russia',
                                                            'Rwanda' => 'Rwanda',
                                                            'Saint Kitts and Nevis' => 'Saint Kitts and Nevis',
                                                            'Saint Lucia' => 'Saint Lucia',
                                                            'Saint Vincent and the Grenadines' =>
                                                                'Saint Vincent and the Grenadines',
                                                            'Samoa' => 'Samoa',
                                                            'San Marino' => 'San Marino',
                                                            'Sao Tome and Principe' => 'Sao Tome and Principe',
                                                            'Saudi Arabia' => 'Saudi Arabia',
                                                            'Senegal' => 'Senegal',
                                                            'Serbia' => 'Serbia',
                                                            'Seychelles' => 'Seychelles',
                                                            'Sierra Leone' => 'Sierra Leone',
                                                            'Singapore' => 'Singapore',
                                                            'Slovakia' => 'Slovakia',
                                                            'Slovenia' => 'Slovenia',
                                                            'Solomon Islands' => 'Solomon Islands',
                                                            'Somalia' => 'Somalia',
                                                            'South Africa' => 'South Africa',
                                                            'South Korea' => 'South Korea',
                                                            'South Sudan' => 'South Sudan',
                                                            'Spain' => 'Spain',
                                                            'Sri Lanka' => 'Sri Lanka',
                                                            'Sudan' => 'Sudan',
                                                            'Suriname' => 'Suriname',
                                                            'Sweden' => 'Sweden',
                                                            'Switzerland' => 'Switzerland',
                                                            'Syria' => 'Syria',
                                                            'Taiwan' => 'Taiwan',
                                                            'Tajikistan' => 'Tajikistan',
                                                            'Tanzania' => 'Tanzania',
                                                            'Thailand' => 'Thailand',
                                                            'Timor-Leste' => 'Timor-Leste',
                                                            'Togo' => 'Togo',
                                                            'Tonga' => 'Tonga',
                                                            'Trinidad and Tobago' => 'Trinidad and Tobago',
                                                            'Tunisia' => 'Tunisia',
                                                            'Turkey' => 'Turkey',
                                                            'Turkmenistan' => 'Turkmenistan',
                                                            'Tuvalu' => 'Tuvalu',
                                                            'Uganda' => 'Uganda',
                                                            'Ukraine' => 'Ukraine',
                                                            'United Arab Emirates' => 'United Arab Emirates',
                                                            'United Kingdom' => 'United Kingdom',
                                                            'United States' => 'United States',
                                                            'Uruguay' => 'Uruguay',
                                                            'Uzbekistan' => 'Uzbekistan',
                                                            'Vanuatu' => 'Vanuatu',
                                                            'Vatican City' => 'Vatican City',
                                                            'Venezuela' => 'Venezuela',
                                                            'Vietnam' => 'Vietnam',
                                                            'Yemen' => 'Yemen',
                                                            'Zambia' => 'Zambia',
                                                            'Zimbabwe' => 'Zimbabwe',
                                                        ];
                                                    @endphp

                                                    <select name="country" id="country" class="form-select">
                                                        <option value="">Select Your Country</option>
                                                        @foreach ($countries as $code => $name)
                                                            <option value="{{ $code }}"
                                                                {{ $selectedCountry == $code ? 'selected' : '' }}>
                                                                {{ $name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="invalid-feedback"></div>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <p class="note-tip2 mt-2"></p>
                                                        <p class="note-tip mt-2">Change Country</p>
                                                    </div>
                                                </div>

                                                <!-- Terms Checkbox -->
                                                <div class="col-xl-11 col-lg-11 col-md-12 col-12  ">
                                                    <div
                                                        class="form-check d-flex gap-2 justify-content-start align-items-center mb-lg-4 mb-3">
                                                        <input
                                                            class="form-check-input @error('terms') is-invalid @enderror"
                                                            type="checkbox" name="terms" id="ageCheckbox"
                                                            {{ old('terms', $profile->terms ?? false) ? 'checked' : '' }}>
                                                        <label class="form-check-label pt-1" for="ageCheckbox">
                                                            By checking the checkbox you agree that you are above 18 years
                                                            old
                                                        </label>
                                                        @error('terms')
                                                            <small class="text-danger d-block">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>


                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Favorite Quote*</label>
                                                    <textarea name="favorite_quotes" id="favorite_quotes" class="form-control" placeholder="Enter Favorite Quotes"
                                                        rows="4" maxlength="100">{{ old('favorite_quotes', $profile->favorite_quotes ?? '') }}</textarea>
                                                    <div class="invalid-feedback"></div>
                                                    <small id="favoriteQuotesCount"
                                                        class="text-muted d-block text-end mt-1">0 / 100</small>
                                                    {{-- <div class="d-flex justify-content-between align-items-center">
                                                        <p class="note-tip2 mt-2"></p>
                                                        <p class="note-tip mt-2">Change Favorite Quotes</p>
                                                    </div> --}}
                                                </div>


                                                <!-- Book Name -->
                                                <div class="top_header mt-4 mb-3">
                                                    <h4>Add Book and Description</h4>
                                                </div>

                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Name of Book*</label>
                                                    <input type="text" name="book_name" id="book_name"
                                                        class="form-control" placeholder="Enter book name"
                                                        value="{{ old('book_name', $profile->book_name ?? '') }}" />
                                                    <div class="invalid-feedback"></div>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <p class="note-tip2 mt-2"></p>
                                                        <p class="note-tip mt-2">Change Book Name</p>
                                                    </div>
                                                </div>

                                                <!-- Author Name -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Author Name*</label>
                                                    <input type="text" name="author_name" id="author_name"
                                                        class="form-control" placeholder="Enter author name"
                                                        value="{{ old('author_name', $profile->author_name ?? '') }}" />
                                                    <div class="invalid-feedback"></div>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <p class="note-tip2 mt-2"></p>
                                                        <p class="note-tip mt-2">Change Author Name</p>
                                                    </div>
                                                </div>

                                                <!-- Description -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <label class="label-text mb-1">Short Description*</label>
                                                    <textarea name="short_description" id="short_description" class="form-control" placeholder="Enter description"
                                                        rows="4" maxlength="100">{{ old('short_description', $profile->short_description ?? '') }}</textarea>
                                                    <div class="invalid-feedback"></div>
                                                    <small id="shortDescriptionCount"
                                                        class="text-muted d-block text-end mt-1">0 / 100</small>
                                                    {{-- <div class="d-flex justify-content-between align-items-center">
                                                        <p class="note-tip2 mt-2"></p>
                                                        <p class="note-tip mt-2">Change Description</p>
                                                    </div> --}}
                                                </div>


                                                <!-- Book Cover Upload -->
                                                <div class="col-xxl-9 col-lg-11 col-md-12 col-12 pb-lg-1">
                                                    <div
                                                        class="text_upload d-flex justify-content-between align-items-center">
                                                        <label class="label-text mb-1">Upload Book Cover Photo*</label>
                                                        <img src="{{ asset('website/images/pencil.png') }}"
                                                            alt="" class="img-fluid" />

                                                    </div>
                                                </div>

                                                <div class="col-xxl-9 col-lg-11 col-md-12 col-12 pb-lg-1">
                                                    <div class="text-center drop_file py-4" id="dropArea"
                                                        style="cursor: pointer;">
                                                        <img id="book_cover_preview"
                                                            src="{{ $profile && $profile->book_cover ? asset('website/uploads/book_covers/' . $profile->book_cover) : asset('website/images/Round.png') }}"
                                                            alt="Book Cover" class="img-fluid"
                                                            style="height:350px; width:400px; margin-bottom:6px;"
                                                            data-existing-cover="{{ $profile->book_cover ?? '' }}" />
                                                        {{-- <img id="book_cover_preview"
                                                            src="{{ $profile && $profile->book_cover ? asset('website/uploads/book_covers/' . $profile->book_cover) : asset('website/images/Round.png') }} "
                                                            alt="Book Cover"  /> --}}
                                                        <h2>Upload a file</h2>
                                                        <label class="label-text mb-1">Drag and drop file here</label>
                                                        <input type="file" name="book_cover" id="book_cover_input" />
                                                        <div class="invalid-feedback"></div>
                                                    </div>
                                                </div>



                                                <!-- Submit Button -->
                                                <div class="col-xxl-9 col-lg-11 col-md-12 col-12 my-4">
                                                    <button type="submit" class="submit-btn">Submit</button>
                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-2" role="tabpanel"
                                    aria-labelledby="v-pills-2-tab" tabindex="0">
                                    <div class="login_background py-3">
                                        <div class="top_header my-4">
                                            <h4>Change Password</h4>
                                        </div>


                                        <form id="updatePasswordForm" method="POST"
                                            action="{{ route('profile.updatePassword') }}">
                                            @csrf
                                            <div class="row d-flex justify-content-start align-items-center">
                                                <!-- Current Password -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <div class="password-container position-relative">
                                                        <label class="label-text mb-1">Old Password</label>
                                                        <img src="{{ asset('website/images/lock.svg') }}"
                                                            alt="" />
                                                        <div class="divider">|</div>
                                                        <input type="password" name="current_password"
                                                            id="current_password"
                                                            class="form-control ps-5 @error('current_password') is-invalid @enderror"
                                                            placeholder="Old Password" required>
                                                        <i class="fa-regular fa-eye-slash toggle-password"
                                                            data-target="current_password"></i>
                                                        @error('current_password')
                                                            <small class="text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <!-- New Password -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <div class="password-container position-relative">
                                                        <label class="label-text mb-1">New Password</label>
                                                        <img src="{{ asset('website/images/lock.svg') }}"
                                                            alt="" />
                                                        <div class="divider">|</div>
                                                        <input type="password" name="new_password" id="new_password"
                                                            class="form-control ps-5 @error('new_password') is-invalid @enderror"
                                                            placeholder="New Password" required>
                                                        <i class="fa-regular fa-eye-slash toggle-password"
                                                            data-target="new_password"></i>
                                                        @error('new_password')
                                                            <small class="text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <!-- Confirm New Password -->
                                                <div class="mb-lg-4 mb-3 col-xxl-9 col-lg-11 col-md-12 col-12">
                                                    <div class="password-container position-relative">
                                                        <label class="label-text mb-1">Confirm New Password</label>
                                                        <img src="{{ asset('website/images/lock.svg') }}"
                                                            alt="" />
                                                        <div class="divider">|</div>
                                                        <input type="password" name="new_password_confirmation"
                                                            id="new_password_confirmation" class="form-control ps-5"
                                                            placeholder="Confirm New Password" required>
                                                        <i class="fa-regular fa-eye-slash toggle-password"
                                                            data-target="new_password_confirmation"></i>
                                                    </div>
                                                </div>

                                                <div class="col-xl-9 col-lg-9 col-md-12 col-12 my-4">
                                                    <button type="submit" class="submit-btn">Update Password</button>
                                                </div>
                                            </div>
                                        </form>


                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-3" role="tabpanel"
                                    aria-labelledby="v-pills-3-tab" tabindex="0">
                                    <div class="row d-flex justify-content-start align-items-center pt-lg-3">
                                        <div class="col-xxl-9 col-lg-11 col-md-12 col-12">
                                            <div class="row d-flex justify-content-start align-items-center mt-4">
                                                <div class="col-6">
                                                    <div class="top_header">
                                                        <h4>Latest Subscription</h4>
                                                    </div>
                                                </div>
                                                @if (isset($latestSubscription) &&
                                                        $latestSubscription->subscription_start &&
                                                        $latestSubscription->subscription_end &&
                                                        now()->lt(\Carbon\Carbon::parse($latestSubscription->subscription_end)))
                                                    <div class="col-6">
                                                        <div class="action-active float-end">
                                                            <a href="javascript:void(0)" class="text-success">Active</a>
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="col-6">
                                                        <div class="action-active float-end">
                                                            <a href="javascript:void(0)" class="text-danger">In Active</a>
                                                        </div>
                                                    </div>
                                                @endif


                                            </div>
                                        </div>
                                        <div class="col-xxl-9 col-lg-11 col-md-12 col-12 pt-lg-3">
                                            <div class="card p-4">
                                                <div class="row d-flex justify-content-start align-items-center">
                                                    <div class="col-8">
                                                        <!-- <div class="top_header ">
                                                                                                                                                                                                                                                                                            <h4></h4>

                                                                                                                                                                                                                                                                                        </div> -->

                                                        @if (isset($latestSubscription) &&
                                                                $latestSubscription->subscription_start &&
                                                                now()->lt(\Carbon\Carbon::parse($latestSubscription->subscription_end)))
                                                            <div class="member-tile mb-3">
                                                                <h4>
                                                                    {{ ucfirst($latestSubscription->subscription_type) }}
                                                                    Subscription
                                                                </h4>
                                                            </div>
                                                        @else
                                                            <div class="member-tile mb-3">
                                                                <h4 style="font-size:17px;">You don't have any active
                                                                    subscription</h4>
                                                            </div>
                                                        @endif

                                                    </div>
                                                    @if (isset($latestSubscription) &&
                                                            $latestSubscription->subscription_start &&
                                                            $latestSubscription->subscription_end &&
                                                            now()->lt(\Carbon\Carbon::parse($latestSubscription->subscription_end)))
                                                        <div class="col-4">
                                                            <div
                                                                class="action-active d-flex justify-content-end align-items-center mb-3">
                                                                <form action="{{ route('cancel.trial') }}" method="POST"
                                                                    class="me-2 action-active">
                                                                    @csrf
                                                                    <button type="submit"
                                                                        class="btn p-0 m-0 text-danger">Cancel</button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    @endif


                                                    @if (isset($latestSubscription) && $latestSubscription->subscription_start)
                                                        <div class="col-12">
                                                            <div class="member-time mb-3">
                                                                <span>Start Date:
                                                                    {{ \Carbon\Carbon::parse($latestSubscription->subscription_start)->toFormattedDateString() }}
                                                                </span>
                                                            </div>
                                                            <div class="member-time">
                                                                <span>End Date:
                                                                    @if ($latestSubscription->subscription_end)
                                                                        {{ \Carbon\Carbon::parse($latestSubscription->subscription_end)->toFormattedDateString() }}
                                                                    @else
                                                                        N/A
                                                                    @endif
                                                                </span>
                                                            </div>
                                                        </div>
                                                    @endif


                                                </div>
                                            </div>
                                        </div>
                                        {{-- <div class="col-4 my-4">
                                            <button type="submit" class="submit-btn">Sumbit</button>
                                        </div> --}}
                                    </div>

                                    @if ($subscriptionHistory->count())
                                        <div class="col-xxl-9 col-lg-11 col-md-12 col-12 pt-3">
                                            <div class="card p-4">
                                                <h5 class="mb-3">Previous Subscriptions</h5>
                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle text-center">
                                                        <thead>
                                                            <tr>
                                                                <th>#</th>
                                                                <th>Type</th>
                                                                <th>Start Date</th>
                                                                <th>End Date</th>
                                                                {{-- <th>Status</th> --}}
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @if ($subscriptionHistory->isNotEmpty())
                                                                @foreach ($subscriptionHistory as $index => $sub)
                                                                    <tr>
                                                                        <td>{{ $index + 1 }}</td>
                                                                        <td>{{ ucfirst($sub->subscription_type) }}</td>
                                                                        <td>{{ \Carbon\Carbon::parse($sub->subscription_start)->toFormattedDateString() }}
                                                                        </td>
                                                                        <td>{{ \Carbon\Carbon::parse($sub->subscription_end)->toFormattedDateString() }}
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            @else
                                                                <tr>
                                                                    <td colspan="4">No previous subscriptions found.
                                                                    </td>
                                                                </tr>
                                                            @endif

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                </div>

                                <div class="tab-pane fade" id="v-pills-6" role="tabpanel"
                                    aria-labelledby="v-pills-6-tab" tabindex="0">

                                    <div class="row pt-lg-3">
                                        <div class="col-xxl-12 col-lg-12 col-md-12 col-12">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="login_background py-3">
                                                        <div class="top_header my-4">
                                                            <h4>Messages</h4>
                                                            <div class="search-box mb-3">
                                                                <input type="text" class="form-control"
                                                                    placeholder="Search conversations...">
                                                            </div>
                                                        </div>

                                                        <div class="conversation-list">
                                                            @forelse($conversations as $conversation)
                                                                @php
                                                                    $user = $conversation->other_user ?? null;
                                                                    $profile = $user?->profile ?? null;
                                                                @endphp

                                                                @if ($user && $profile)
                                                                    <div class="conversation-item p-3 border-bottom"
                                                                        data-user-id="{{ $user->id }}"
                                                                        data-nickname="{{ $profile->nickname }}"
                                                                        data-verification-status="{{ $profile->verification_status }}"
                                                                        data-real-name="{{ $user->name }}"
                                                                        data-real-country="{{ $profile->country }}"
                                                                        data-profile-likes="{{ $profile->prfile_likes }}"
                                                                        data-book-likes="{{ $profile->book_likes }}"
                                                                        data-book-name="{{ $profile->book_name }}"
                                                                        data-auther-name="{{ $profile->author_name }}"
                                                                        data-short-description="{{ $profile->short_description }}"
                                                                        data-favorite-quote="{{ $profile->favorite_quotes }}"
                                                                        data-book-cover="{{ asset('website/uploads/profile_images/' . ($profile->profile_photo ?? 'default.jpg')) }}"
                                                                        data-last-message="{{ $conversation->last_message->message }}"
                                                                        style="cursor: pointer;">
                                                                        <div class="d-flex align-items-center">
                                                                            <img src="{{ asset('website/uploads/profile_images/' . ($profile->profile_photo ?? 'default-avatar.jpg')) }}"
                                                                                class="rounded-circle me-3 imagemodal"
                                                                                width="50" height="50">
                                                                            <div class="flex-grow-1">
                                                                                <div
                                                                                    class="d-flex justify-content-between">
                                                                                    <h6 class="mb-1">
                                                                                        {{ $profile->nickname ?? $user->name }}
                                                                                    </h6>
                                                                                    <small
                                                                                        class="text-muted">{{ $conversation->last_message->created_at->diffForHumans() }}</small>
                                                                                </div>
                                                                                <p class="text-muted mb-0 text-truncate">
                                                                                    @if ($conversation->last_message->sender_id == Auth::id())
                                                                                        <strong>You:</strong>
                                                                                    @endif
                                                                                    {{ $conversation->last_message->message }}
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            @empty
                                                                <div class="text-center py-4">
                                                                    <p>No conversations yet</p>
                                                                </div>
                                                            @endforelse



                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="col-lg-6 mt-lg-5">
                                                    <!-- Chat Box Container -->
                                                    @if ($isActive)
                                                        <div id="chat-container" class="mt-lg-5 mt-3"
                                                            style="display: none;">
                                                            <div class="card">
                                                                <div
                                                                    class="card-header d-flex justify-content-between align-items-center">
                                                                    <h5 id="chat-user-name"></h5>
                                                                    <button class="btn btn-sm btn-close"
                                                                        id="close-chat"></button>
                                                                </div>
                                                                <div class="card-body p-0">
                                                                    <div class="chat-box p-3 border rounded bg-light"
                                                                        id="chat-box"
                                                                        style="height: 300px; overflow-y: auto;">
                                                                        <!-- Messages will load here -->
                                                                    </div>
                                                                    <div class="input-group p-3">
                                                                        <input type="text"
                                                                            class="form-control chat-input"
                                                                            placeholder="Type your message...">
                                                                        <button
                                                                            class="btn back-btn p-2 send-btn">Send</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="alert alert-warning mt-3">
                                                            You must have an active subscription to chat.
                                                        </div>
                                                    @endif
                                                </div>

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


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



    <!-- Message Detail Modal -->
    {{-- <div class="modal fade" id="messagePreviewModal" tabindex="-1" aria-labelledby="messagePreviewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        Sender Info - <span id="verificationStatus" class="badge bg-secondary text-capitalize"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modalMessageContent">
                    <!-- Filled by JS -->
                </div>
            </div>
        </div>
    </div> --}}
    <div class="modal fade" id="messagePreviewModal" tabindex="-1" aria-labelledby="messagePreviewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center gap-2">
                        <span>Sender Info</span>
                        <span id="verificationStatusss" class="badge text-capitalize"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modalMessageContent">
                    <!-- Filled by JS -->
                </div>
            </div>
        </div>
    </div>


    <script>
        const isActive = @json($isActive);
        document.querySelectorAll('.conversation-item').forEach(item => {
            item.addEventListener('click', function(event) {
                if (!isActive) return;

                // Get data attributes
                const userId = this.dataset.userId;
                const nickname = this.dataset.nickname || 'N/A';
                const realCountry = this.dataset.realCountry || 'N/A';
                const bookName = this.dataset.bookName || 'N/A';
                const authorName = this.dataset.autherName || 'N/A';
                const shortDescription = this.dataset.shortDescription || 'N/A';
                const favoriteQuote = this.dataset.favoriteQuote || 'N/A';
                const bookCover = this.dataset.bookCover || '';
                const verificationStatus = this.dataset.verificationStatus || 'Unknown';

                if (event.target.classList.contains('imagemodal')) {
                    const modalBody = document.getElementById('modalMessageContent');
                    const verificationStatusEl = document.getElementById('verificationStatusss');

                    // Set the badge text
                    verificationStatusEl.textContent = verificationStatus;

                    // Reset badge classes
                    verificationStatusEl.className = 'badge text-capitalize';

                    // Apply badge styles based on status
                    switch (verificationStatus.toLowerCase()) {
                        case 'verified':
                            verificationStatusEl.classList.add('bg-success', 'text-white');
                            break;
                        case 'unverified':
                            verificationStatusEl.classList.add('bg-warning', 'text-dark');
                            break;
                        case 'rejected':
                            verificationStatusEl.classList.add('bg-danger', 'text-white');
                            break;
                        default:
                            verificationStatusEl.classList.add('bg-secondary', 'text-white');
                    }

                    // Set modal content
                    modalBody.innerHTML = `
                <div class="row d-flex justify-content-center align-items-center">
                    <div class="col-xxl-10 col-lg-10 col-md-11 col-12">
                        <div class="row gy-3 d-flex justify-content-center align-items-center">
                            <div class="col-md-4 detail_book_img">
                                <img src="${bookCover}" class="img-fluid rounded" alt="Book Cover">
                            </div>
                            <div class="col-md-8 text-md-start text-center">
                                <p><strong>Nickname:</strong> ${nickname}</p>
                                <p><strong>Country:</strong> ${realCountry}</p>
                                <p><strong>Book:</strong> ${bookName}</p>
                                <p><strong>Author:</strong> ${authorName}</p>
                                <p><strong>Short Description:</strong> ${shortDescription}</p>
                                <p><strong>Favorite Quote:</strong> ${favoriteQuote}</p>
                            </div>
                        </div>
                    </div>
                </div>
            `;

                    new bootstrap.Modal(document.getElementById('messagePreviewModal')).show();
                    return;
                }

                // Show chat container
                document.getElementById('chat-container').style.display = 'block';
            });
        });

        // document.querySelectorAll('.conversation-item').forEach(item => {
        //     item.addEventListener('click', function(event) {
        //         if (!isActive) return;

        //         // Get data attributes
        //         // Extract all data-* attributes
        //         const userId = this.dataset.userId;
        //         const nickname = this.dataset.nickname || 'N/A';
        //         // const realName = this.dataset.realName || 'N/A';
        //         const realCountry = this.dataset.realCountry || 'N/A';
        //         // const profileLikes = this.dataset.profileLikes || 0;
        //         // const bookLikes = this.dataset.bookLikes || 0;
        //         const bookName = this.dataset.bookName || 'N/A';
        //         const authorName = this.dataset.autherName || 'N/A';
        //         const shortDescription = this.dataset.shortDescription || 'N/A';
        //         const favoriteQuote = this.dataset.favoriteQuote || 'N/A';
        //         const bookCover = this.dataset.bookCover || '';
        //         const verificationStatus = this.dataset.verificationStatus || 'Unknown';
        //         // const lastMessage = this.dataset.lastMessage || '';

        //         // If the click target was the image, open only the modal
        //         if (event.target.classList.contains('imagemodal')) {
        //             const modalBody = document.getElementById('modalMessageContent');
        //             const verificationStatusEl = document.getElementById('verificationStatus');

        //             verificationStatusEl.textContent = verificationStatus;
        //             verificationStatusEl.className = 'badge'; // Reset class
        //             switch (verificationStatus.toLowerCase()) {
        //                 case 'verified':
        //                     verificationStatusEl.classList.add('bg-success');
        //                     break;
        //                 case 'unverified':
        //                     verificationStatusEl.classList.add('bg-warning', 'text-dark');
        //                     break;
        //                 case 'rejected':
        //                     verificationStatusEl.classList.add('bg-danger');
        //                     break;
        //                 default:
        //                     verificationStatusEl.classList.add('bg-secondary');
        //             }
        //             modalBody.innerHTML = `
    //             <div class="row d-flex justify-content-center align-items-center">
    //                 <div class="col-xxl-10 col-lg-10 col-md-11 col-12">
    //                     <div class="row gy-3 d-flex justify-content-center align-items-center">
    //                         <div class="col-md-4 detail_book_img">
    //                             <img src="${bookCover}" class="img-fluid rounded" alt="Book Cover">
    //                         </div>
    //                         <div class="col-md-8 text-md-start text-center">
    //                             <p><strong>Nickname:</strong> ${nickname}</p>
    //                             <p><strong>Country:</strong> ${realCountry}</p>
    //                             <p><strong>Book:</strong> ${bookName}</p>
    //                             <p><strong>Author:</strong> ${authorName}</p>
    //                             <p><strong>Short Description:</strong> ${shortDescription}</p>
    //                             <p><strong>Favorite Quote:</strong> ${favoriteQuote}</p>
    //                         </div>
    //                     </div>
    //                 </div>
    //             </div>
    //         `;
        //             new bootstrap.Modal(document.getElementById('messagePreviewModal')).show();
        //             return; // prevent chat from opening
        //         }

        //         // Otherwise open the chat only
        //         document.getElementById('chat-container').style.display = 'block';
        //     });
        // });
        // const isActive = @json($isActive);
    </script>

@endsection





@section('scriptJs')
@endsection

{{-- <script>
    document.addEventListener('DOMContentLoaded', function() {
        const profileInput = document.getElementById('profile_photo');

        document.querySelectorAll('.trigger-upload').forEach(el => {
            el.addEventListener('click', function() {
                profileInput.click();
            });
        });

        document.querySelector('.delete-photo')?.addEventListener('click', function() {
            // Optional: reset the file input and preview image
            profileInput.value = '';
            document.getElementById('profile_preview').src =
            '{{ asset('website/images/big-dp.png') }}';
        });

        // Optional: Preview selected image
        profileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('profile_preview').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    });
</script> --}}