@extends("backend.layouts.app")

@section("title")
    {{ __($module_action) }} {{ __($module_title) }}
@endsection

@section("breadcrumbs")
    <x-backend.breadcrumbs>
        <x-backend.breadcrumb-item route='{{ route("backend.$module_name.index") }}' icon="{{ $module_icon }}">
            {{ __($module_title) }}
        </x-backend.breadcrumb-item>

        <x-backend.breadcrumb-item type="active">{{ __($module_action) }}</x-backend.breadcrumb-item>
    </x-backend.breadcrumbs>
@endsection

@section("content")
<style>
    .ck-editor__editable {
        min-height: 200px;
    }
</style>

<section class="p-3 bg-white rounded-lg shadow-sm">
    <!-- Tab Navigation -->
    <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link nav-links" id="about-tab" data-bs-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">
                <i class="fas fa-info-circle"></i> About
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link nav-links" id="team-tab" data-bs-toggle="tab" href="#team" role="tab" aria-controls="team" aria-selected="false">
                <i class="fas fa-user-friends"></i> Team
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link nav-links" id="photo-video-tab" data-bs-toggle="tab" href="#photo-video" role="tab" aria-controls="photo-video" aria-selected="false">
                <i class="fas fa-image"></i> Photo & Video
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link nav-links" id="social-tab" data-bs-toggle="tab" href="#social" role="tab" aria-controls="social" aria-selected="false">
                <i class="fas fa-share-alt"></i> Social
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link nav-links" id="review-tab" data-bs-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="false">
                <i class="fas fa-star"></i> Review
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link nav-links" id="password-tab" data-bs-toggle="tab" href="#password" role="tab" aria-controls="password" aria-selected="false">
                <i class="fas fa-lock"></i> Password
            </a>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="myTabContent">
        <!-- About Tab (Merged General Info and About) -->
        <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
            <form action="{{ route('backend.profiles.update', $$module_name->user_id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="companyName" class="form-label">Company Name</label>
                        <input class="form-control" type="text" id="companyName" name="company_name" value="{{ old('company_name', $$module_name->company_name ?? '') }}" required>
                    </div>
                    <div class="col-sm-6">
                        <label for="contactName" class="form-label">Contact Name</label>
                        <input class="form-control" type="text" id="contactName" name="contact_name" value="{{ old('contact_name', $$module_name->contact_name ?? '') }}" required>
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="address" class="form-label">Address</label>
                        <input class="form-control" type="text" id="address" name="address" value="{{ old('address', $$module_name->address ?? '') }}" required>
                    </div>
                    <div class="col-sm-6">
                        <label for="openingHours" class="form-label">Opening Hours</label>
                        <input class="form-control" type="text" id="openingHours" name="opening_hours" value="{{ old('opening_hours', $$module_name->opening_hours ?? '') }}" required>
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="col-sm-4">
                        <label for="city" class="form-label">City</label>
                        <input class="form-control" type="text" id="city" name="city" value="{{ old('city', $$module_name->city ?? '') }}" required>
                    </div>
                    <div class="col-sm-4">
                        <label for="state" class="form-label">State</label>
                        <select class="form-control" id="state" name="state" required>
                            <option value="">Select a state</option>
                            @foreach($states as $state)
                                <option value="{{ $state->id }}"
                                    {{ $$module_name->state_id == $state->id ? 'selected' : '' }}>
                                    {{ $state->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <label for="postcode" class="form-label">Postcode</label>
                        <input class="form-control" type="text" id="postcode" name="postcode" value="{{ old('postcode', $$module_name->postcode ?? '') }}" required>
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="email" class="form-label">Email</label>
                        <input class="form-control" type="text" id="email" name="email" value="{{ old('email', $$module_name->email ?? '') }}" disabled>
                    </div>
                    <div class="col-sm-6">
                        <label for="website" class="form-label">Website</label>
                        <input class="form-control" type="text" id="website" name="website" value="{{ old('website', $$module_name->website ?? 'https://www.facebook.com/') }}" required>
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="col-sm-4">
                        <label for="mobile" class="form-label">Phone</label>
                        <input class="form-control" type="tel" id="mobile" name="mobile" value="{{ old('mobile', $$module_name->mobile ?? '') }}" required>
                    </div>
                    <div class="col-sm-4">
                        <label for="enquireNow" class="form-label">Enquire Now</label>
                        <input class="form-control" type="tel" id="enquireNow" name="enquire_now" value="{{ old('enquire_now', $$module_name->enquire_now ?? '') }}" min="0" required>
                    </div>
                    <div class="col-sm-4">
                        <label for="whatsapp" class="form-label">Whatsapp</label>
                        <input class="form-control" type="tel" id="whatsapp" name="whatsapp" value="{{ old('whatsapp', $$module_name->whatsapp ?? '') }}" required>
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="title" class="form-label">Title <sub>(Max 10 Words)</sub></label>
                        <input class="form-control" type="text" id="title" name="title" value="{{ old('title', $$module_name->title ?? '') }}" required>
                    </div>
                    <div class="col-sm-6">
                        <label for="dealsIn" class="form-label">Deals In <sub>(Separate with commas - max 12 words)</sub></label>
                        <input class="form-control" type="text" id="dealsIn" name="deals_in" value="{{ old('deals_in', $$module_name->deals_in ?? '') }}" required>
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="introduction" class="form-label">Introduction <sub>(Max 30 Words)</sub></label>
                        <textarea class="form-control" id="introduction" name="introduction" style="height: 162px;" required>{{ old('introduction', $$module_name->introduction ?? '') }}</textarea>
                    </div>
                    <div class="col-sm-6">
                        <label for="descriptions" class="form-label">Descriptions</label>
                        <textarea class="form-control" id="descriptions" name="description" style="height: 162px;" required>{{ old('description', $$module_name->description ?? '') }}</textarea>
                    </div>
                </div>
                <div class="btn-box mt-4 text-center">
                    <button type="submit" class="btn btn-primary px-5 py-2">Update</button>
                </div>
            </form>
        </div>

        <!-- Team Tab -->
        <div class="tab-pane fade" id="team" role="tabpanel" aria-labelledby="team-tab">
            <form action="{{ route('backend.profiles.broker.team') }}" id="memberForm" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="d-flex form-row mb-3">
                    <div class="col-sm-4">
                        <div class="d-flex">
                            <div class="upload-file"
                                style="border: 2px dashed red; padding: 20px; text-align: center; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;">
                                <div>
                                    <span style="color: red; font-size: 16px;">
                                        <i class="fas fa-cloud-upload-alt" style="font-size: 24px;"></i><br>
                                        Click Here Or Drop Files To Upload
                                    </span>
                                </div>
                                <input type="file" id="profileImage" name="profile_image" style="display: none;" accept="image/*">
                            </div>
                            <div id="imagePreview" style="margin-left: 20px; display: none;">
                                <img id="previewImg" src="" alt="Image Preview" style="max-width: 100px; height: auto; border-radius: 8px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-sm-4">
                        <label for="name" class="form-label">Name</label>
                        <input class="form-control" type="text" id="name" name="name" required>
                    </div>
                    <div class="col-sm-4">
                        <label for="designation" class="form-label">Designation</label>
                        <input class="form-control" type="text" id="designation" name="designation" required>
                    </div>
                    <div class="col-sm-4">
                        <label for="facebook" class="form-label">Facebook</label>
                        <input class="form-control" type="url" id="facebook" name="facebook" value="https://www.facebook.com/">
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-sm-4">
                        <label for="linkedin" class="form-label">LinkedIn</label>
                        <input class="form-control" type="url" id="linkedin" name="linkedin" value="https://www.linkedin.com/">
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-sm-12 text-left">
                        <button type="submit" class="btn btn-warning" id="addMemberButton">
                            + Add
                        </button>
                    </div>
                </div>
            </form>

            @if(count($$module_name['teams']) > 0)
                <div class="team-listing mt-5">
                    <h3>Team Members</h3>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Profile Image</th>
                                    <th>Name</th>
                                    <th>Designation</th>
                                    <th>Social Links</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($$module_name['teams'] as $index => $member)
                                    <tr id="team-member-{{ $member->id }}">
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <img src="{{ asset($member->profile_image) }}" alt="Profile Image" style="width: 100px;height: 100px;object-fit: fill;border-radius: 50%;">
                                        </td>
                                        <td>{{ $member->name }}</td>
                                        <td>{{ $member->designation }}</td>
                                        <td>
                                            @if($member->facebook)
                                                <div><strong>Facebook:</strong> <a href="{{ $member->facebook }}" target="_blank">{{ $member->facebook }}</a></div>
                                            @endif
                                            @if($member->linkedin)
                                                <div><strong>LinkedIn:</strong> <a href="{{ $member->linkedin }}" target="_blank">{{ $member->linkedin }}</a></div>
                                            @endif
                                        </td>
                                        <td>
                                            <button class="btn btn-warning btn-sm" id="memberEdit" onclick="editTeamMember({{ $member->id }})">Edit</button>
                                            <form id="deleteForm-{{ $member->id }}" action="{{ route('backend.profiles.team.destroy', $member->id) }}" method="POST" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete({{ $member->id }})">Delete</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        <!-- Photo & Video Tab -->
        <div class="tab-pane fade" id="photo-video" role="tabpanel" aria-labelledby="photo-video-tab">
            <form id="uploadForm" action="{{ route('backend.profiles.broker.upload') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('POST')
                
                <div class="card p-3 mb-3">
                    <h5 class="mb-3">Profile Image <sub>(Only one image is allowed as Profile image)</sub></h5>
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-3 mb-3">
                            <div class="d-flex flex-column align-items-center">
                                <div class="d-flex flex-wrap gap-3 p-2" id="avatarPreviewContainer"></div>
                                <div class="p-2" style="height: 50px; border: 2px dashed red; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer;" id="avatarUploadBox">
                                    <span style="color: red; font-size: 13px; text-align: center;">
                                        <i class="fas fa-cloud-upload-alt" style="font-size: 24px;"></i><br>Click Here Or Drop Files To Upload
                                    </span>
                                    <input type="file" name="avatar" accept="image/*" style="display: none;" id="avatarInput">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-9">
                            <div class="d-flex flex-wrap gap-3" id="DBphotoContainer">
                                <div class="col mb-3">
                                    <div class="position-relative" style="height: 170px; width: 170px;">
                                        <img src="{{ asset($$module_name->avatar) }}" class="img-fluid w-100 h-100 object-cover rounded">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card p-3 mb-3">
                    <h5 class="mb-3">Upload Photo <sub>(Only one image allowed. Upgrade your subscription to upload up to 10 images)</sub></h5>
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-3 mb-3">
                            <div class="d-flex flex-column align-items-center">
                                <div class="d-flex flex-wrap gap-3 p-2" id="photoPreviewContainer"></div>
                                <div class="p-2" style="height: 50px; border: 2px dashed red; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer;" id="photoUploadBox">
                                    <span style="color: red; font-size: 13px; text-align: center;">
                                        <i class="fas fa-cloud-upload-alt" style="font-size: 24px;"></i><br>Click Here Or Drop Files To Upload
                                    </span>
                                    <input type="file" name="photoUpload" accept="image/*" style="display: none;" id="photoInput">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-9">
                            <div class="d-flex flex-wrap gap-3" id="DBphotoContainer">
                                @foreach($$module_name->brokerUploads as $upload)
                                    @if($upload->photo)
                                        <div class="col mb-3 photo-item">
                                            <div class="position-relative" style="height: 170px; width: 170px;">
                                                <img src="{{ asset($upload->photo) }}" class="img-fluid w-100 h-100 object-cover rounded">
                                                <button type="button" class="btn btn-danger btn-sm delete-media position-absolute top-0 end-0" data-id="{{ $upload->id }}">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card p-3 mb-3">
                    <h5 class="mb-3">Upload Video</h5>
                    <div class="col-sm-6 mt-5 text-left">
                        @foreach($$module_name->brokerUploads as $upload)
                            @if($upload->youtube_link)
                                <div class="col mb-3 video-item">
                                    <div class="position-relative" style="height: 170px; width: 170px;">
                                        @php
                                            $videoId = null;
                                            if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=))([^"&?\/\s]{11})/i', $upload->youtube_link, $matches)) {
                                                $videoId = $matches[1];
                                            }
                                        @endphp
                                        @if($videoId)
                                            <div class="embed-responsive embed-responsive-16by9" style="width: 170px; height: 170px; object-fit: cover;">
                                                <iframe class="embed-responsive-item"
                                                        src="https://www.youtube.com/embed/{{ $videoId }}"
                                                        allowfullscreen
                                                        frameborder="0">
                                                </iframe>
                                            </div>
                                        @else
                                            <p>Invalid YouTube link.</p>
                                        @endif
                                        <button type="button" class="btn btn-danger btn-sm delete-media position-absolute top-0 end-0" data-id="{{ $upload->id }}">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                        <label for="youtube" class="form-label">Youtube Link</label>
                        <input class="form-control" type="url" id="youtube" name="youtube_link">
                    </div>
                </div>

                <div class="btn-box mt-4 text-center">
                    <button type="submit" class="btn btn-primary px-5 py-2">Update</button>
                </div>
            </form>
        </div>

        <!-- Social Tab -->
        <div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
            <form action="{{ route('backend.profiles.broker.socials') }}" method="POST">
                @csrf
                @method('PUT')
                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="facebook" class="form-label">Facebook</label>
                        <input class="form-control" type="text" id="facebook" name="facebook" value="{{ $$module_name->facebook ?? 'https://www.facebook.com/' }}" required>
                    </div>
                    <div class="col-sm-6">
                        <label for="instagram" class="form-label">Instagram</label>
                        <input class="form-control" type="text" id="instagram" name="instagram" value="{{ $$module_name->instagram ?? 'https://www.instagram.com/' }}" required>
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="youtube" class="form-label">YouTube</label>
                        <input class="form-control" type="text" id="youtube" name="youtube" value="{{ $$module_name->youtube ?? 'https://www.youtube.com/' }}" required>
                    </div>
                    <div class="col-sm-6">
                        <label for="linkedin" class="form-label">LinkedIn</label>
                        <input class="form-control" type="text" id="linkedin" name="linkedin" value="{{ $$module_name->linkedin ?? 'https://www.linkedin.com/' }}" required>
                    </div>
                </div>
                <div class="btn-box mt-4 text-center">
                    <button type="submit" class="btn btn-primary px-5 py-2">Update</button>
                </div>
            </form>
        </div>

        <!-- Review Tab -->
        <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
            <form id="reviewForm" action="{{ route('backend.profiles.broker.review') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group mb-3">
                    @if(!$is_subscribed)
                    <div class="text-center"><strong class="p-2 bg-danger text-white">A subscription is required to add reviews. Upgrade now to share your feedback!</strong></div>
                    <div class="text-center mt-3" ><strong class="text-white p-2 " style="background: rgb(255 176 0)">Total Reviews: {{$broker_review}}</strong></div>
                    <hr>
                    @endif
                    <div class="col-sm-4">
                        <label class="form-label">Client Image</label>
                        <div class="d-flex">
                            <div class="upload-box"
                                style="border: 2px dashed red; padding: 20px; text-align: center; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;">
                                <div>
                                    <span style="color: red; font-size: 16px;">
                                        <i class="fas fa-cloud-upload-alt" style="font-size: 24px;"></i><br>
                                        Click Here Or Drop Files To Upload
                                    </span>
                                </div>
                                <input type="file" id="clientImage" name="client_image" accept="image/*" {{ (!$is_subscribed) ? 'disabled' : ''}} style="display: none;">
                            </div>
                            <div id="clientImagePreview" style="margin-left: 20px; display: none;">
                                <img id="clientPreviewImage" src="" alt="Image Preview" style="max-width: 100px; height: auto; border-radius: 8px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="clientName" class="form-label">Client Name</label>
                        <input class="form-control" type="text" id="clientName" name="client_name" {{ (!$is_subscribed) ? 'disabled' : ''}} required>
                    </div>
                    <div class="col-sm-6">
                        <label for="clientDesignation" class="form-label">Client Designation</label>
                        <input class="form-control" type="text" id="clientDesignation" name="client_designation" {{ (!$is_subscribed) ? 'disabled' : ''}} required>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-sm-6">
                        <label for="clientReview" class="form-label">Client Review</label>
                        <textarea class="form-control" id="clientReview" name="client_review" style="height: 162px;" {{ (!$is_subscribed) ? 'disabled' : ''}} required></textarea>
                    </div>
                    <div class="col-sm-6">
                        <label for="stars" class="form-label">Number of Stars</label>
                        <select class="form-control h-auto" id="stars" {{ (!$is_subscribed) ? 'disabled' : ''}} name="stars" required>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>

                <div class="form-group text-left mt-3">
                    <button type="submit" id="reviewActionBTN" {{ (!$is_subscribed) ?? 'disabled'}} class="btn btn-primary">Submit Review</button>
                </div>
            </form>

            @if(count($$module_name['reviews']) > 0)
                <div class="team-listing mt-5">
                    <h3>Broker Reviews</h3>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Client Image</th>
                                    <th>Reviewer Name</th>
                                    <th>Review</th>
                                    <th>Rating</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($$module_name['reviews'] as $index => $review)
                                    <tr id="review-{{ $review->id }}">
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <img src="{{ asset($review->client_image) }}" alt="Client Image" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%; border: 2px solid #ddd;">
                                        </td>
                                        <td>{{ $review->client_name }} <br> <em>{{ $review->client_designation }}</em></td>
                                        <td>{{ $review->client_review }}</td>
                                        <td>
                                            @for ($i = 1; $i <= 5; $i++)
                                                <i class="fas fa-star {{ $i <= $review->stars ? 'text-warning' : 'text-muted' }}"></i>
                                            @endfor
                                        </td>
                                        <td>
                                            <button class="btn btn-warning btn-sm" onclick="editReview({{ $review->id }})">Edit</button>
                                            <form id="deleteForm-{{ $review->id }}" action="{{ route('backend.profiles.review.destroy', $review->id) }}" method="POST" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete({{ $review->id }})">Delete</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        <!-- Password Tab -->
        <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab">
            <form action="{{ route('backend.profiles.changePasswordUpdate') }}" method="POST">
                @csrf
                @method('PATCH')
                <div class="form-group mb-3">
                    <label for="current_password" class="form-label">Current Password</label>
                    <input class="form-control" type="password" id="current_password" name="current_password" required>
                </div>
                <div class="form-group mb-3">
                    <label for="new_password" class="form-label">New Password</label>
                    <input class="form-control" type="password" id="new_password" name="new_password" required>
                </div>
                <div class="form-group mb-3">
                    <label for="new_password_confirmation" class="form-label">Confirm Password</label>
                    <input class="form-control" type="password" id="new_password_confirmation" name="new_password_confirmation" required>
                </div>
                <div class="btn-box mt-4 text-center">
                    <button type="submit" class="btn btn-primary px-5 py-2">Update</button>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- IMMEDIATE TAB INITIALIZATION SCRIPT - Place right after tab content -->
<script>
(function() {
    // Get stored tab immediately
    let activeTab = localStorage.getItem('activeTab') || '#about';
    
    // Remove all default active classes immediately
    document.addEventListener('DOMContentLoaded', function() {
        // Remove active from all tabs first
        document.querySelectorAll('.nav-links').forEach(link => {
            link.classList.remove('active');
            link.setAttribute('aria-selected', 'false');
        });
        
        document.querySelectorAll('.tab-pane').forEach(pane => {
            pane.classList.remove('show', 'active');
        });
        
        // Immediately set the correct tab as active
        const targetTabLink = document.querySelector(`[href="${activeTab}"]`);
        const targetTabContent = document.querySelector(activeTab);
        
        if (targetTabLink && targetTabContent) {
            targetTabLink.classList.add('active');
            targetTabLink.setAttribute('aria-selected', 'true');
            targetTabContent.classList.add('show', 'active');
        }
        
        // Setup click handlers
        document.querySelectorAll(".nav-links").forEach(tab => {
            tab.addEventListener("click", function (e) {
                e.preventDefault();
                
                const targetTab = this.getAttribute('href');
                localStorage.setItem('activeTab', targetTab);
                
                // Remove active from all
                document.querySelectorAll('.nav-links').forEach(link => {
                    link.classList.remove('active');
                    link.setAttribute('aria-selected', 'false');
                });
                
                document.querySelectorAll('.tab-pane').forEach(pane => {
                    pane.classList.remove('show', 'active');
                });
                
                // Add active to clicked tab
                this.classList.add('active');
                this.setAttribute('aria-selected', 'true');
                
                const content = document.querySelector(targetTab);
                if (content) {
                    content.classList.add('show', 'active');
                }
            });
        });
    });
})();
</script>

<!-- Photo preview script -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    let photoCount = 0;
    let videoCount = 0;
    const maxUploads = 1;

    function previewFile(input, previewContainer, type) {
        if (input.files.length > 0) {
            while (previewContainer.firstChild) {
                previewContainer.removeChild(previewContainer.firstChild);
            }

            if (type === 'photo') photoCount = 0;
            if (type === 'video') videoCount = 0;

            let file = input.files[0];
            let reader = new FileReader();
            reader.onload = function(e) {
                let previewDiv = document.createElement("div");
                previewDiv.classList.add("col", "p-0");
                previewDiv.style = "position: relative; height: 170px; width: 170px;";

                if (type === 'photo') {
                    previewDiv.innerHTML = `
                        <img src="${e.target.result}" class="img-fluid w-100 h-100 object-cover rounded">
                        <button type="button" class="btn btn-danger btn-sm remove-file position-absolute top-0 end-0">X</button>
                    `;
                    photoCount++;
                } else {
                    previewDiv.innerHTML = `
                        <video class="w-100 h-100 object-cover rounded" controls>
                            <source src="${e.target.result}" type="${file.type}">
                            Your browser does not support the video tag.
                        </video>
                        <button type="button" class="btn btn-danger btn-sm remove-file position-absolute top-0 end-0">X</button>
                    `;
                    videoCount++;
                }

                previewContainer.appendChild(previewDiv);

                previewDiv.querySelector(".remove-file").addEventListener("click", function() {
                    previewDiv.remove();
                    if (type === 'photo') photoCount--;
                    else videoCount--;
                });
            };
            reader.readAsDataURL(file);
        }
    }

    // Upload box click handlers
    document.getElementById("photoUploadBox")?.addEventListener("click", function() {
        document.getElementById("photoInput").click();
    });
    document.getElementById("avatarUploadBox")?.addEventListener("click", function() {
        document.getElementById("avatarInput").click();
    });

    // File input change handlers
    document.getElementById("photoInput")?.addEventListener("change", function() {
        previewFile(this, document.getElementById("photoPreviewContainer"), 'photo');
    });
    document.getElementById("avatarInput")?.addEventListener("change", function() {
        previewFile(this, document.getElementById("avatarPreviewContainer"), 'photo');
    });
});
</script>

<!-- Other existing scripts -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // CKEditor initialization
    const textareaElement = document.querySelector('#descriptions');
    if (textareaElement) {
        ClassicEditor
            .create(textareaElement, {
                removePlugins: ['Title'],
            })
            .then(editor => {
                window.editor = editor;
                editor.ui.view.editable.element.style.height = '200px';

                const form = textareaElement.closest('form');
                if (form) {
                    form.addEventListener('submit', function(event) {
                        textareaElement.value = editor.getData();
                        if (textareaElement.hasAttribute('required') && editor.getData().trim() === '') {
                            event.preventDefault();
                            alert('Please fill in the description field.');
                            return false;
                        }
                    });
                }
                textareaElement.removeAttribute('required');
            })
            .catch(error => {
                console.error('CKEditor initialization error:', error);
                if (textareaElement) {
                    textareaElement.style.display = 'block';
                }
            });
    }

    // Team member edit functionality
    const updateMemberUrl = "{{ route('backend.profiles.member.update', ':id') }}";
    const assetUrl = "{{ asset('') }}";

    window.editTeamMember = function(id) {
        fetch(`/public/admin/profiles/team/${id}/edit`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('name').value = data.data.name;
                document.getElementById('designation').value = data.data.designation;
                document.getElementById('facebook').value = data.data.facebook;
                document.getElementById('linkedin').value = data.data.linkedin;

                if (data.data.profile_image) {
                    document.getElementById('previewImg').src = `${assetUrl}${data.data.profile_image}`;
                    document.getElementById('imagePreview').style.display = 'block';
                }

                document.getElementById('memberForm').action = updateMemberUrl.replace(':id', id);
                document.getElementById('addMemberButton').textContent = 'Update Member';

                const formSection = document.getElementById('memberForm');
                formSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    }

    // Delete media functionality
    document.querySelectorAll('.delete-media').forEach(function(button) {
        button.addEventListener('click', function () {
            const mediaId = this.getAttribute('data-id');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`{{ route('backend.profiles.broker.delete-upload', ':id') }}`.replace(':id', mediaId), {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json',
                        },
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire('Deleted!', data.message, 'success');
                            button.closest('.photo-item, .video-item').remove();
                        } else {
                            Swal.fire('Error!', data.message || 'Something went wrong.', 'error');
                        }
                    })
                    .catch(error => {
                        Swal.fire('Error!', 'There was an issue deleting the file.', 'error');
                    });
                }
            });
        });
    });

    // Profile image upload
    document.querySelector('.upload-file')?.addEventListener('click', function () {
        document.getElementById('profileImage').click();
    });

    document.getElementById('profileImage')?.addEventListener('change', function (e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (event) {
                const imagePreview = document.getElementById('imagePreview');
                const previewImg = document.getElementById('previewImg');
                imagePreview.style.display = 'block';
                previewImg.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // Client image upload
    document.querySelector('.upload-box')?.addEventListener('click', function() {
        document.getElementById('clientImage').click();
    });

    document.getElementById('clientImage')?.addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const previewImage = document.getElementById('clientPreviewImage');
                const imagePreview = document.getElementById('clientImagePreview');
                previewImage.src = e.target.result;
                imagePreview.style.display = 'flex';
            };
            reader.readAsDataURL(file);
        }
    });

    // Review edit functionality
    const updateReviewUrl = "{{ route('backend.profiles.review.update', ':id') }}";
    
    window.editReview = function(reviewId) {
        fetch(`/admin/profiles/review/${reviewId}/edit`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('reviewForm').action = updateReviewUrl.replace(':id', reviewId);
                document.getElementById('clientName').value = data.client_name;
                document.getElementById('clientDesignation').value = data.client_designation;
                document.getElementById('clientReview').value = data.client_review;
                document.getElementById('stars').value = data.stars;

                if (data.client_image) {
                    document.getElementById('clientPreviewImage').src = `${assetUrl}${data.client_image}`;
                    document.getElementById('clientImagePreview').style.display = 'block';
                }

                document.getElementById('reviewActionBTN').innerText = 'Update Review';

                const formSection = document.getElementById('reviewForm');
                formSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            })
            .catch(error => console.error('Error fetching review:', error));
    }
});

// Confirm delete function
function confirmDelete(id) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to undo this action!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById(`deleteForm-${id}`).submit();
            Swal.fire('Deleted!', 'The item has been deleted.', 'success');
        } else {
            Swal.fire('Cancelled', 'The item was not deleted.', 'info');
        }
    });
}
</script>
@endsection