@push('css')
<style>
    .website-container {
        display: inline-flex;
        flex-wrap: wrap;
        word-break: break-all;
        max-width: 100%;
    }

    .website-link {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .social-icon-container {
        position: relative;
        display: inline-block;
        margin: 5px;
    }

    .delete-icon {
        position: absolute;
        top: -5px;
        right: -16px;
        background: red;
        color: white;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s;
    }

    .delete-icon:hover {
        background: darkred;
    }
</style>
@endpush
<!-- first col for profile information -->
<div class="col-3">
    <div class="card text-start ">
        <div class="card-body p-0 pt-2">
            <!-- Circular profile image -->
            <div class="d-flex justify-content-center">
                <div class="contact-profile-image m-0 mt-2 p-0 text-center w-25">
                    <img src="{{ asset('assets/images/profile/profile.png') }}" class="img-fluid  rounded-circle w-75"
                        alt="lead image">
                </div>
                <div class="w-75">

                    <h5 class="mb-0 p-0">{{ $lead['f_name'] ?? '-' }} {{ $lead['l_name'] ?? '-' }} </h5>
                    <p class="mb-0 p-0">{{ $lead['title'] ?? '--' }}</p>
                    <p style="margin-top: -7px;">{{ $lead['company'] }}</p>
                </div>

            </div>
            <div class="px-3">
                <p class="mb-0 p-0"><b>Lead Type</b> : {{ $lead['leadType'] }}</p>
            </div>

            <div class="px-3 d-flex align-items-center">
                <span class="fw-bold me-1">Listing Type:</span>
                <span>{{ $lead['property_type'] ?? '' }}</span>
            </div>

            <!-- Divider with gray color -->
            <hr style="background-color: #ccc;">

            <!-- Basic information -->

            <ul class="list-unstyled px-3 pb-2">
                <li class="pb-1">
                    <i class="fas fa-envelope text-primary"></i> &nbsp;
                    {{ $lead['email'] }}
                </li>
                <li class="pb-1 d-flex align-items-center">
                    <i class="fas fa-phone text-primary"></i> &nbsp;


                    {{ $lead['phone'] }}
                    <span class="ms-auto">
                        <i class="las la-plus-circle la-2x bg-primary rounded-5 text-white" data-bs-toggle="modal"
                            data-bs-target="#addNewPhoneModal" style="cursor: pointer;"></i>
                    </span>
                </li>
                <li class="pb-1 d-flex align-items-center">
                    <i class="fa-solid fa-tty text-primary "></i> &nbsp;
                    {{ $lead['additional_phone'] }}
                </li>
                @foreach ($lead['phones'] as $item)
                <li class="pb-1 d-flex align-items-center">
                    @if ($item["phone_type"] == "phone")

                    <i class="fas fa-phone text-primary"></i> &nbsp;
                    @else
                    <i class="fa-solid fa-tty text-primary "></i>&nbsp;
                    {{ $item['phone_number'] }}{{ isset($item['phone_extension']) ? '-' . $item['phone_extension'] : '' }}
                    @endif
                    <button class="fa-solid fa-trash text-danger bg-transparent rounded-5 border-0 la-1x"
                        style="margin-left: 1rem;" data-id="{{ $item['id'] }}">
                    </button>
                </li>
                @endforeach
                <li class="pb-1">
                    <i class="fas fa-map-marker-alt text-primary"></i> &nbsp;
                    {{ $lead['address'] }}, {{ $lead['city'] }}, {{ $lead['state'] }}
                    {{ $lead['zip_code'] }}
                </li>
            </ul>

            <!-- Divider with gray color -->
            {{-- <hr style="background-color: #ccc;"> --}}
            <div class="p-2">
                <div id="accordion" class="p-2">
                    <!-- details accordion  -->
                    <div class="accordion-item mb-1">
                        <h2 class="accordion-header accordion-header-primary" id="details-heading">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#details-collapse" aria-expanded="true"
                                aria-controls="details-collapse">
                                <i class="fa-solid fa-list text-primary "></i> &nbsp; Details
                            </button>
                        </h2>
                        <div id="details-collapse" class="accordion-collapse collapse"
                            aria-labelledby="details-heading" data-bs-parent="#accordion">
                            <div class="accordion-body">
                                <p class="m-0">
                                    <span class="font-w700 me-1">Status:</span>
                                    <span class="">{{ $lead['lead_status'] }}</span>
                                </p>

                                @if (!empty($lead['lead_source']))
                                <p class="m-0 d-flex align-items-center">
                                    <span class="fw-bold me-1">Source:</span>
                                    <span class="badge bg-primary p-0 px-2 tag"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="top"
                                        title="{{ Str::title(str_replace('_', ' ', $lead['lead_source'])) }}">
                                        {{ Str::limit(Str::title(str_replace('_', ' ', $lead['lead_source'])), 20, '...') }}
                                    </span>
                                </p>
                                @endif


                                <script>
                                    document.addEventListener("DOMContentLoaded", function() {
                                        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                                        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                                            return new bootstrap.Tooltip(tooltipTriggerEl);
                                        });
                                    });
                                </script>


                                <div class="d-flex flex-wrap">
                                    <strong> Tags: </strong> &nbsp;
                                    @php
                                    $tags = is_array($lead['tags']) ? $lead['tags'] : explode(',', $lead['tags']);
                                    $displayTags = array_slice($tags, 0, 3);
                                    $remainingTags = array_slice($tags, 3);
                                    @endphp

                                    @forelse ($displayTags as $tag)
                                    <span class="badge bg-primary p-0 px-2 tag me-1 mb-1">{{ $tag }}</span>
                                    @empty

                                    @endforelse

                                    @if (count($remainingTags) > 0)
                                    <button type="button" class="badge bg-info contact-transaction-btn border ms-1" data-bs-toggle="modal" data-bs-target="#tagsModal">
                                        More
                                    </button>
                                    @endif
                                </div>


                                <!-- Modal for all tags -->
                                <div class="modal fade" id="tagsModal" tabindex="-1" aria-labelledby="tagsModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="tagsModalLabel">All Tags</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body d-flex flex-wrap">
                                                @foreach ($remainingTags as $tag)
                                                <div class="badge bg-primary p-0 px-2 me-1 mb-1 tag">
                                                    <span>{{ $tag }}</span>
                                                </div>
                                                @endforeach
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal">Close</button>

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


                            </div>
                        </div>
                    </div>
                    <!-- Requirement accordion  -->
                    <div class="accordion-item mb-1">
                        <h2 class="accordion-header accordion-header-primary" id="requirement-heading">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#requirement-collapse" aria-expanded="true"
                                aria-controls="requirement-collapse">
                                <i class="fa-solid fa-file-alt text-primary"></i> &nbsp; Requirement
                            </button>
                        </h2>
                        <div id="requirement-collapse" class="accordion-collapse collapse"
                            aria-labelledby="requirement-heading" data-bs-parent="#accordion">
                            <div class="accordion-body">
                                @if (count($lead['requirements'])>0)
                                @if($lead['leadType'] == 'seller')
                                @foreach($lead['requirements'] as $requirement)
                                <p class="m-0"><span class="font-w700 me-1">Expected Listing Price:</span>
                                    <span>{{ $requirement['expected_listing_price'] }}</span>
                                </p>
                                <p class="m-0"><span class="font-w700 me-1">Square Footage:</span>
                                    <span>{{ $requirement['square_footage'] }}</span>
                                </p>
                                <p class="m-0"><span class="font-w700 me-1">Lot Size:</span>
                                    <span>{{ $requirement['lot_size'] }}</span>
                                </p>
                                <hr>
                                @endforeach
                                @endif
                                @if ($lead['leadType'] == 'seller')
                                @foreach($lead['requirements'] as $requirement)
                                @php
                                $comps = json_decode($requirement['comps'], true);
                                $sellerPriceMax = json_decode($requirement['seller_price_max'], true);
                                $sellerPriceMin = json_decode($requirement['seller_price_min'], true);
                                $pricePerSqrFT = json_decode($requirement['price_per_sqrFT'], true);
                                $sellerCompsFiles = json_decode($requirement['seller_comps_file'], true);
                                // Ensure all arrays have the same count
                                $maxItems = max(
                                count($comps ?? []),
                                count($sellerPriceMax ?? []),
                                count($sellerPriceMin ?? []),
                                count($pricePerSqrFT ?? []),
                                count($sellerCompsFiles ?? [])
                                );
                                @endphp
                                @if($maxItems>0)
                                @for ($i = 0; $i < $maxItems; $i++)
                                    <div class="section">
                                    <span><strong>Comps:</strong> {{ $comps[$i] ?? '' }}</span><br>
                                    <span><strong>Seller Price Max:</strong> {{ $sellerPriceMax[$i] ?? '' }}</span><br>
                                    <span><strong>Seller Price Min:</strong> {{ $sellerPriceMin[$i] ?? '' }}</span><br>
                                    <span><strong>Price Per SqrFT:</strong> {{ $pricePerSqrFT[$i] ?? '' }}</span><br>
                                    <span><strong>Seller Comps File:</strong>
                                        @if(isset($sellerCompsFiles[$i]))
                                        <a href="{{ asset($sellerCompsFiles[$i]) }}" target="_blank">
                                            <i class="bi bi-file-earmark text-primary fs-4 me-3"></i>
                                        </a>
                                        @endif
                                    </span>
                            </div>
                            <hr>
                            @endfor
                            @else
                            <p class="text-center">No Comps Available</p>
                            @endif
                            @endforeach
                            @elseif ($lead['leadType'] == 'buyer')
                            @foreach($lead['requirements'] as $requirement)
                            <p class="m-0"><span class="font-w700 me-1">Price Range Min:</span>
                                <span>{{ $requirement['price_range_min'] }}</span>
                            </p>
                            <p class="m-0"><span class="font-w700 me-1">Price Range Max:</span>
                                <span>{{ $requirement['price_range_max'] }}</span>
                            </p>
                            <p class="m-0"><span class="font-w700 me-1">Desired Square Footage
                                    Min:</span>
                                <span>{{ $requirement['desired_square_footage_min'] }}</span>
                            </p>
                            <p class="m-0"><span class="font-w700 me-1">Desired Square Footage
                                    Max:</span>
                                <span>{{ $requirement['desired_square_footage_max'] }}</span>
                            </p>
                            <p class="m-0"><span class="font-w700 me-1">Desired Lot Size Min:</span>
                                <span>{{ $requirement['desired_lot_size_min'] }}</span>
                            </p>
                            <p class="m-0"><span class="font-w700 me-1">Desired Lot Size Max:</span>
                                <span>{{ $requirement['desired_lot_size_max'] }}</span>
                            </p>
                            <p class="m-0"><span class="font-w700 me-1">Is Investment:</span>
                                <span>{{ $requirement['is_investment'] }}</span>
                            </p>
                            <p class="m-0"><span class="font-w700 me-1">Financing/Cash:</span>
                                <span>{{ $requirement['financing_cash'] }}</span>
                            </p>
                            <p class="m-0"><span class="font-w700 me-1">Pre Approved:</span>
                                <span>{{ $requirement['pre_approved'] }}</span>
                            </p>
                            @endforeach
                            @else
                            <p>No Requirement Data Available</p>
                            @endif
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Transaction accordion  -->
                <div class="accordion-item mb-1">
                    <h2 class="accordion-header accordion-header-primary" id="transaction-heading">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#transaction-collapse" aria-expanded="true"
                            aria-controls="transaction-collapse">
                            <i class="fa-solid fa-exchange-alt text-primary"></i> &nbsp; Transaction
                        </button>
                    </h2>
                    <div id="transaction-collapse" class="accordion-collapse collapse"
                        aria-labelledby="transaction-heading" data-bs-parent="#accordion">
                        <div class="accordion-body text-center">
                            <p class="m-0">Coming Soon</p>
                        </div>
                    </div>
                </div>

                <!-- History accordion  -->
                <div class="accordion-item mb-1">
                    <h2 class="accordion-header accordion-header-primary" id="history-heading">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#history-collapse" aria-expanded="true"
                            aria-controls="history-collapse">
                            <i class="fa-solid fa-clock-rotate-left text-primary"></i> &nbsp; History
                        </button>
                    </h2>
                    <div id="history-collapse" class="accordion-collapse collapse"
                        aria-labelledby="history-heading" data-bs-parent="#accordion">
                        <div class="accordion-body">
                            @forelse ($lead['history'] ?? [] as $history)
                            <div>
                                <p class="m-0">
                                    <span class="font-w700 me-1">Commercial: </span>
                                    <span class="">
                                        <a href="#"> House Street 345
                                            Buy on 3/20/2023</a>
                                    </span>
                                </p>
                            </div>
                            @empty
                            <div>
                                <p class="m-0">
                                    <span class="font-w700 me-1">Commercial: </span>
                                    <span class="">
                                        <a href="#"> House Street 345
                                            Buy on 3/20/2023</a>
                                    </span>
                                </p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
                @if($lead['leadType'] == 'buyer' && $lead['property_type'])
                <!-- property visited  -->
                <div class="accordion-item mb-1">
                    <h2 class="accordion-header accordion-header-primary" id="property-visited-heading">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#property-visited-collapse" aria-expanded="true"
                            aria-controls="property-visited-collapse">
                            <i class="fa-solid fa-location-dot text-primary"></i> &nbsp;Visited Property
                        </button>
                    </h2>
                    <div id="property-visited-collapse" class="accordion-collapse collapse"
                        aria-labelledby="property-visited-heading" data-bs-parent="#accordion">
                        <div class="accordion-body">
                            @if (isset($lead['visited_properties']))
                            @forelse ($lead['visited_properties'] as $visitedProperties)
                            <div class="d-flex">
                                <div class="me-2">
                                    @if(isset($visitedProperties['lead_property_visted_image']))
                                    <a href="{{ asset($visitedProperties['lead_property_visted_image']) }}" target="_blank" class="text-primary"><img src="{{ asset($visitedProperties['lead_property_visted_image']) }}" width="70" height="70" alt=""></a>
                                    @endif
                                </div>
                                <div>
                                    <p class="m-0">
                                        <span class="font-w700 me-1"><i class="fa-solid fa-location-dot "></i> </span>
                                        <span class="">
                                            <a href="#">
                                                {{ $visitedProperties['lead_property_visted_address'] }} </a>
                                        </span>
                                    </p>
                                    <p class="m-0">
                                        <span class="font-w700 me-1"><i class="fa fa-money-bill-wave"></i> </span>
                                        <span
                                            class="">${{ $visitedProperties['lead_property_visted_price'] }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <p class="m-0">
                                <span class="font-w700 me-1">Comment/Notes </span>
                                <span class="">
                                    {{ $visitedProperties['lead_property_visted_notes'] }} </span>
                            </p>

                            <p class="m-0"><strong>File:</strong>
                                @if(isset($visitedProperties['lead_property_visted_file']))
                                <a href="{{ asset($visitedProperties['lead_property_visted_file']) }}" target="_blank" class="text-primary"><i class="bi bi-file-earmark text-primary fs-4 me-3"></i></a>
                                @else

                                @endif
                            </p>
                            <hr style="background-color: #ccc;">
                            @empty
                            <p class="text-center">Visited Property Not Found</p>
                            @endforelse
                            @endif
                        </div>
                    </div>
                </div>
                @endif
                <!-- llc  -->
                <div class="accordion-item mb-1">
                    <h2 class="accordion-header accordion-header-primary" id="llc-heading">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#llc-collapse" aria-expanded="true" aria-controls="llc-collapse">
                            <i class="fa-solid fa-file-contract text-primary"></i> &nbsp;LLC
                        </button>
                    </h2>
                    <div id="llc-collapse" class="accordion-collapse collapse" aria-labelledby="llc-heading"
                        data-bs-parent="#accordion">
                        <div class="accordion-body">
                            @forelse ($lead['organizations'] as $organization)
                            <div class="row px-1 mb-1">
                                <p>Company: <span><b>{{ $organization['company_name'] }}</b></span></p>
                                <!-- <p>Corporate State ID: <span><b>{{ $organization['corporate_state_id'] }}</b></span></p> -->

                                <div class="col-12 mb-1">
                                    <h6>Members:</h6>
                                    @if (!empty($organization['members']) && is_array($organization['members']))
                                    @foreach ($organization['members'] as $member)
                                    <div class="mb-2 p-2 border rounded bg-body-secondary">
                                        <div>
                                            <i class="bi bi-person"></i> <b>{{ $member['name'] }}</b>
                                        </div>
                                        <div>
                                            <i class="bi bi-phone"></i> {{ $member['phone'] }}
                                        </div>
                                        <div>
                                            <i class="bi bi-envelope"></i> {{ $member['email'] }}
                                        </div>
                                        <div>
                                            <i class="bi bi-pencil"></i> Authorized to Sign:
                                            <b>{{ $member['authorized_to_sign'] ? 'Yes' : 'No' }}</b>
                                        </div>
                                    </div>
                                    @endforeach
                                    @else
                                    <p class="text-muted">No members found</p>
                                    @endif
                                </div>
                            </div>
                            <hr style="background-color: #ccc;">
                            @empty
                            <div class="row mb-1">
                                <p class="text-center">Organization Not Found</p>
                            </div>
                            @endforelse
                        </div>

                    </div>
                </div>

                <!-- social profile accordion  -->
                <div class="accordion-item mb-1">
                    <h2 class="accordion-header accordion-header-primary" id="social-profile-heading">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#social-profile-collapse" aria-expanded="true"
                            aria-controls="social-profile-collapse">
                            <i class="fa-regular fa-circle-user text-primary"></i> &nbsp; Social Profile
                            <span class="ms-auto">
                                <i class="las la-plus-circle la-2x mx-4 bg-primary rounded-5 text-white"
                                    data-bs-toggle="modal" data-bs-target="#addNewSocialMediaProfileModel"></i>
                            </span>
                        </button>
                    </h2>
                    <div id="social-profile-collapse" class="accordion-collapse collapse"
                        aria-labelledby="social-profile-heading" data-bs-parent="#accordion">
                        <div class="accordion-body">
                            <div class="d-flex justify-content-evenly">
                                @if (isset($lead['socials']))
                                @forelse ($lead['socials'] as $social)
                                @if (array_key_exists($social['type'], $socialIcons))
                                <div class="social-icon-container">
                                    <a href="{{ $social['url'] }}" target="_blank">
                                        <i class="{{ $socialIcons[$social['type']] }} text-primary fa-2x"></i>
                                    </a>
                                    <span class="delete-icon" data-id="{{ $social['id'] }}">×</span>
                                </div>
                                @endif
                                @empty
                                <p>Social Links Not Found</p>
                                @endforelse
                                @else
                                <p>Social Links Not Found</p>
                                @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- Modal to Add New Phone Number -->
<div class="modal fade" id="addNewPhoneModal" tabindex="-1" aria-labelledby="addNewPhoneModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addNewPhoneModalLabel">Add Additional Phone Number</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addPhoneForm">
                    <input type="hidden" id="leadId" value="{{ $lead['id'] }}">
                    <input type="hidden" id="type" value="lead">
                    <!-- Phone Type Dropdown -->
                    <div class="mb-3">
                        <label for="phoneType" class="form-label">Phone Type</label>
                        <select id="phone_type" name="phone_type" class="form-select" required>
                            <option value="phone">Phone</option>
                            <option value="office">Office</option>
                        </select>
                    </div>

                    <!-- Phone Number and Extension -->
                    <div class="row align-items-center" id="phoneRow">
                        <div class="col-md-8 mb-3" id="phoneNumberCol">
                            <label for="phoneNumber" class="form-label">Phone Number</label>
                            <input type="text" name="phone_number"
                                class="form-control form-control-sm phone_number_formate" id="phone_number"
                                placeholder="Enter phone number" required>
                        </div>
                        <div class="col-md-4 mb-3" id="extensionCol" style="display: none;">
                            <label for="extension" class="form-label">Extension</label>
                            <input type="text" name="phone_extension" class="form-control form-control-sm"
                                id="phone_extension" placeholder="Ext." maxlength="4">
                        </div>
                    </div>

                    <!-- Button Container -->
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary btn-sm me-2">Add Phone Number</button>
                        <button type="button" class="btn btn-danger btn-sm me-2" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    // Handle form submission
    $('#addPhoneForm').on('submit', function(e) {

        e.preventDefault(); // Prevent default form submission behavior

        let phone_type = $('#phone_type').val();
        let phone_number = $('#phone_number_full').val();
        let phone_extension = $('#phone_extension').val();
        let leadId = $('#leadId').val();
        let type = $('#type').val();
        // Validation
        if (phone_type === 'phone' && !phone_number) {
            alert('Phone number is required!');
            return;
        }

        // AJAX request
        $.ajax({
            url: '/add-phone-number/' + leadId,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                phone_type: phone_type,
                phone_number: phone_number,
                phone_extension: phone_extension,
                type: type,
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Phone number added!',
                    text: response.message,
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#17a2b8'
                });
                $('#addNewPhoneModal').modal('hide');
                window.location.reload();
                // Optionally refresh data without reloading the page
                // Update your data dynamically here
            },
            error: function(xhr) {
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: Object.values(xhr.responseJSON.errors).join('\n'),
                        confirmButtonText: 'Try again',
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Something went wrong',
                        text: 'Please try again.',
                        confirmButtonText: 'OK',
                    });
                }
            },
        });
    });

    $(document).ready(function() {
        // Set up AJAX to include CSRF token in headers
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // Bind click event to all trash buttons
        $('button.fa-trash').on('click', function(event) {
            event.preventDefault(); // Prevent default behavior (e.g., form submission)

            var phoneId = $(this).data('id'); // Get the phone ID from the data-id attribute

            // Use SweetAlert2 for confirmation
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#17a2b8', // Custom color for confirm button (Teal/Blue)
                cancelButtonColor: '#d33' // Red color for cancel button
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        url: '/delete-phone-number/' +
                            phoneId, // URL to the route that deletes the phone
                        type: 'DELETE',
                        success: function(response) {
                            if (response.success) {
                                // If successful, remove the phone from the UI
                                $('#phone-' + phoneId).remove();
                                Swal.fire({
                                    title: 'Deleted!',
                                    text: 'The phone number has been deleted.',
                                    icon: 'success',
                                    confirmButtonColor: '#17a2b8'
                                });
                                window.location.reload();
                            } else {
                                Swal.fire({
                                    title: 'Failed!',
                                    text: 'There was an error deleting the phone.',
                                    icon: 'error',
                                    confirmButtonColor: '#17a2b8'
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire({
                                title: 'Error!',
                                text: 'There was an error with the request.',
                                icon: 'error',
                                confirmButtonColor: '#17a2b8'
                            });
                        }
                    });
                }
            });
        });
    });

    // Dynamic layout adjustment
    $('#phone_type').on('change', function() {
        if ($(this).val() === 'office') {
            $('#phoneNumberCol').removeClass('col-md-8').addClass('col-md-8');
            $('#extensionCol').show(); // Show extension input
        } else {
            $('#phoneNumberCol').removeClass('col-md-6').addClass('col-md-8');
            $('#extensionCol').hide(); // Hide extension input
        }
    });
    $(".delete-icon").on("click", function() {
        var socialId = $(this).data("id");
        var deleteUrl = "/delete-socialmedia/" + socialId;

        deleteSocialMedia($(this), deleteUrl);
    });
</script>