@props(['countries', 'states', 'shareUrl', 'url', 'page', 'isVerified' => false, 'showOtpField' => false, 'otpMessage' => null, 'isChangingEmail' => false, 'editingEmail' => false])

<div class="row p-4 text-start rounded-3 ">
    <div class="col-xl-4 col-lg-5 col-md-6 mx-auto py-3 d-flex flex-column justify-content-center">
        <div class="d-flex flex-column align-items-center position-relative px-3 pb-3">
            <!-- Profile Image -->
            <img src="{{ $this->getProfileImage() }}"
                class="border rounded-circle overflow-hidden object-fit-cover mb-3"
                id="profile_avatar_image"
                alt="Profile Image"
                width="105"
                height="105">

            <!-- Edit Icon -->
            <div class="edit position-absolute end-0 bottom-0" id="fileUploadArea" style="cursor:pointer;">
                {{-- ✅ Changed from user.avatar to avatar --}}
                <input type="file" wire:model="avatar" id="fileInput" accept="image/*" hidden>
                <div onclick="document.getElementById('fileInput').click()">
                    <i class="fa-solid fa-pen-to-square text-black"></i>
                </div>
            </div>

            {{-- ✅ Show loading indicator while uploading --}}
            <div wire:loading wire:target="avatar" class="text-center mt-2">
                <small class="text-primary">Uploading...</small>
            </div>
        </div>

        <div class="d-flex justify-content-center">
            <span>Gender :</span>

            <label for="male-radio" class="ms-2">
                <input type="radio" id="male-radio" name="gender" value="MALE" wire:model.defer="user.gender">
                <span class="fw-semibold">Male</span>
            </label>

            <label for="female-radio" class="ms-2">
                <input type="radio" id="female-radio" name="gender" value="FEMALE" wire:model.defer="user.gender">
                <span class="fw-semibold">Female</span>
            </label>

            @error('user.gender')
            <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>


    </div>
    <div class="col-xl-8 col-lg-7 px-0">
        <div class="py-1 px-3 col-12">
            <label class="mb-1 fw-bold d-block" for="text">Full Name</label>
            <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Full Name"
                wire:model.defer="user.name">
            <span class="fs-11 text-secondary">Name Mandatory to complete 100% profile</span>
            @error('user.name') <div class="text-danger">{{ $message }}</div> @enderror
        </div>
        <div class="py-1 px-3 col-12">
            <label class="mb-1 fw-bold d-block" for="text">UserName</label>
            <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="UserName" wire:model.defer="user.username">
        </div>
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Country</label>
        <select wire:model="countryId" wire:change="loadStates($event.target.value)" id="Country"
            class="form-control gradient-border rounded-4">
            <option value="">Select Country</option>
            @foreach($countries as $country)
            <option value="{{ $country['id'] }}">{{ $country['name'] }}</option>
            @endforeach
        </select>
        @error('user.country_id') <div class="text-danger">{{ $message }}</div> @enderror
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">State</label>
        <select wire:model="stateId" id="State" class="form-control gradient-border rounded-4">
            <option value="">Select State</option>
            @foreach($states as $state)
            <option value="{{ $state->id }}">{{ $state->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">City</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="City" wire:model.defer="user.city">
    </div>
    <div class="py-1 px-3 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Verify Mobile Number</label>
        <div class="d-flex gap-2 flex-wrap flex-sm-nowrap">
            <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Mobile Number"
                wire:model.defer="user.mobile_number">
            <a href="#" class="btn btn-primary text-pre" title="Send OTP">Send OTP</a>
        </div>
        <span class="fs-11 text-secondary">Mobile No. Mandatory to complete 100% profile</span>
        @error('user.mobile_number') <div class="text-danger">{{ $message }}</div> @enderror
    </div>
    <div class="py-1 px-3 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Enter OTP</label>
        <div class="d-flex gap-2 flex-wrap flex-sm-nowrap">
            <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Enter OTP">
            <a href="#" class="btn btn-primary text-pre" title="Verify OTP">Verify OTP</a>
        </div>
    </div>

    <div class="py-1 px-3 col-md-8">
        <label class="mb-1 fw-bold d-block" for="email">Verify Email</label>
        <div class="d-flex gap-2 flex-wrap flex-sm-nowrap position-relative">
            <input type="email"
                class="gradient-border py-1 px-3 rounded-4 w-100"
                placeholder="Email"
                wire:model.defer="user.email"
                @disabled(!$editingEmail && $isVerified)>

            @if (!$isVerified)
                <button type="button" class="btn btn-primary" wire:click="sendOtp" title="Verify">Verify</button>
            @elseif ($editingEmail)
                <button type="button" class="btn btn-primary" wire:click="sendOtp" title="Verify">Verify</button>
            @else
                <span class="badge bg-success align-self-center">Verified</span>
                <button type="button" class="btn btn-primary text-pre" wire:click="enableEmailEdit">Change</button>
            @endif
        </div>

        <span class="fs-11 text-secondary">Email ID Mandatory to complete 100% profile</span>
        @error('user.email') <div class="text-danger">{{ $message }}</div> @enderror

        @if ($otpMessage)
            <div class="text-success mt-1">{{ $otpMessage }}</div>
        @endif
    </div>

    <!-- OTP Modal -->
    @if ($showOtpField)
        <div class="modal show d-block bg-dark bg-opacity-50" wire:ignore.self>
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Enter OTP</h5>
                        <button type="button" class="btn-close" wire:click="$set('showOtpField', false)"></button>
                    </div>

                    <div class="modal-body text-center">
                        <input type="text"
                            class="gradient-border py-1 px-2 rounded-3 mb-2 col-12"
                            placeholder="Enter OTP"
                            wire:model.defer="otp">

                        @if ($otpMessage)
                            <div class="mt-1 text-danger fw-semibold">
                                {{ $otpMessage }}
                            </div>
                        @endif

                        @error('otp')
                            <div class="text-danger mt-1">{{ $message }}</div>
                        @enderror

                        <button type="button" class="btn btn-primary w-fit mt-2" wire:click="verifyOtp">
                            Verify OTP
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="py-1 px-3 col-md-4">
        <label class="mb-1 fw-bold d-block" for="date">Date of Birth</label>
        <input type="date" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Date of Birth" wire:model.defer="user.dob">
        <span class="fs-11 text-secondary">DOB Mandatory to complete 100% profile</span>
    </div>
    <div class="py-1 px-3 col-md-8">
        <label class="mb-1 fw-bold d-block" for="text">Address</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Enter Address" wire:model.defer="user.address">
    </div>
    <div class="py-1 px-3 col-md-4">
        <label class="mb-1 fw-bold d-block" for="text">Pincode</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Enter Pincode" wire:model.defer="user.pincode">
    </div>
    <div class="py-1 px-3 col-12">
        <label class="mb-1 fw-bold d-block" for="text">Share Referral Code</label>
        <div class="row">
            <div class="col-xl-9 position-relative">
                <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" value="{{ $user['referral_code'] ?? '' }}" readonly>
                <div class="position-absolute share-referral right-3 top-10" style="cursor:pointer;" onclick="copyReferralCode()">
                    <i class="fa-regular fa-copy"></i>
                </div>
            </div>
            <div class="col-xl-3">
                <a href="#" class="btn mainbluebtn text-decoration-none rounded-4" data-url="{{ $url }}"
                    data-bs-toggle="modal" data-bs-target="#shareModal" title="Share"
                    wire:click="setShareUrl('{{ $url }}')">Share Referral Code</a>
            </div>
        </div>
    </div>

    <div class="modal modal-fade" id="shareModal" aria-labelledby="shareModalLabel" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header justify-content-center border-bottom-0 pb-0">
                    <span class="modal-title fs-5 bluetext fw-bold" id="shareModalLabel">Share</span>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <span class="small text-muted">{{ $url }}</span>
                    <ul class="list-unstyled d-flex justify-content-center align-items-center flex-wrap mt-3">
                        <li>
                            <a href="" class="share-modal-icon twitter-bg text-white" wire:click.prevent="shareOn('twitter')" title="Share on Twitter">
                                <i class="fa-brands fa-x-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" class="share-modal-icon reddit-bg text-white" wire:click.prevent="shareOn('reddit')" title="Share on Reddit">
                                <i class="fa-brands fa-reddit-alien"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" class="share-modal-icon linkdin-bg text-white" wire:click.prevent="shareOn('linkedin')" title="Share on Linkedin">
                                <i class="fa-brands fa-linkedin-in"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" class="share-modal-icon fb-bg text-white" wire:click.prevent="shareOn('facebook')" title="Share on Facebook">
                                <i class="fa-brands fa-facebook-f"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" class="share-modal-icon whatsapp-bg text-white" wire:click.prevent="shareOn('whatsapp')" title="Share on Whatsapp">
                                <i class="fa-brands fa-whatsapp"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" class="share-modal-icon tele-bg text-white" wire:click.prevent="shareOn('telegram')" title="Share on Telegram">
                                <i class="fa-solid fa-paper-plane small"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" class="share-modal-icon pinterest-bg text-white" wire:click.prevent="shareOn('pinterest')" title="Share on Pinterest">
                                <i class="fa-brands fa-pinterest-p"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 my-2">
        <div class="borderyellowleft mt-4 ps-2">
            <span class="h4 bluetext fw-semibold">Submit your Social Links</span>
        </div>
        <span class="fs-11 text-secondary">Minimum two social media IDs required to complete 100% profile</span>
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Facebook ID</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Facebook ID" wire:model.defer="user.facebook_url">
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Twitter ID</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Twitter ID" wire:model.defer="user.twitter_url">
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Instagram ID</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Instagram ID" wire:model.defer="user.instagram_url">
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Reddit ID</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Reddit ID" wire:model.defer="user.reddit_url">
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Linkedin ID</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Linkedin ID" wire:model.defer="user.linkedin_url">
    </div>
    <div class="py-1 px-3 col-lg-4 col-md-6">
        <label class="mb-1 fw-bold d-block" for="text">Telegram ID</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Telegram ID" wire:model.defer="user.telegram_url">
    </div>
    <div class="py-1 px-3 col-12">
        <label class="mb-1 fw-bold d-block" for="text">Discord ID</label>
        <input type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Discord ID" wire:model.defer="user.discord_url">
    </div>
    <div class="py-1 px-3 col-12">
        <label class="mb-1 fw-bold d-block" for="text">About</label>
        <textarea type="text" class="gradient-border py-1 px-3 rounded-4 w-100" placeholder="Bio" rows="5" wire:model.defer="user.about"></textarea>
    </div>

    @push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const fileInput = document.getElementById("fileInput");
            const profileImg = document.getElementById("profile_avatar_image");

            // ✅ Improved preview with Livewire support
            fileInput.addEventListener("change", (event) => {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        profileImg.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
        });

        // ✅ Copy referral code function
        function copyReferralCode() {
            const input = document.querySelector('input[readonly][value]');
            if (input && input.value) {
                navigator.clipboard.writeText(input.value).then(() => {
                    alert('Referral code copied to clipboard!');
                }).catch(err => {
                    console.error('Failed to copy:', err);
                });
            }
        }

        // ✅ Listen for Livewire avatar update event
        Livewire.on('avatarUpdated', () => {
            console.log('Avatar updated successfully');
        });
    </script>
    @endpush

</div>