@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
<div class="col-3">
    <div class="card text-start">
        <div class="card-body p-0 pt-3">
            <!-- 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="contact image">
                </div>
                <div class="w-75 pt-2">
                    <h5 class="mb-0 p-0" id="contact-name">
                        {{-- {{ dd($contact); }} --}}
                        {{ $contact['f_name'] }} {{ $contact['m_name'] }} {{ $contact['l_name'] }}
                    </h5>
                    <p class="mb-0 p-0">{{ $contact['assign_title'][0] ?? 'Developer' }}</p>
                    <p style="margin-top: -7px;">{{ $contact['company'] }}</p>
                    <strong style="margin-top: -7px;">Converted to Lead: </strong> <span>{{ $contact['is_lead'] ? "Yes" : "No" }}</span>
                </div>
            </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;
                    {{ $contact['email'] }}
                </li>
                @isset($contact['cell_phone'])
                <li class="pb-1"><i class="fas fa-phone text-primary"></i> &nbsp; {{ $contact['cell_phone'] }}
                    @endisset
                    @isset($contact['office_phone'])
                <li class="pb-1 d-flex align-items-center">
                    <i class="fa-solid fa-tty text-primary"></i> &nbsp;{{ $contact['office_phone'] }}{{ isset($contact['phone_extension']) ? '-' . $contact['phone_extension'] : '' }}
                    <span class="d-flex align-items-center ms-auto" style="gap: 0.5rem; margin-left: 1rem;">
                        <!-- Add New Phone Icon -->
                        <i class="las la-plus-circle la-2x bg-primary rounded-5 text-white" data-bs-toggle="modal"
                            data-bs-target="#addNewPhoneModal"></i>
                    </span>
                </li>
                @if ($contact && isset($contact['phones']))
                @foreach ($contact['phones'] as $item)
                <li class="pb-1 d-flex align-items-center " id="phone_{{ $item['id'] }}">
                    @if ($item['phone_type'] === 'phone')
                    <i class="fa-solid fa-phone text-primary"></i> &nbsp; {{ $item['phone_number'] }}
                    @elseif($item['phone_type'] === 'office')
                    <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 phoneDeleteBtn"
                        style="margin-left: 1rem;" data-id="{{ $item['id'] }}">
                    </button>
                </li>
                @endforeach
                @endif
                @endisset
                @if ($contact['street'] || $contact['city'] || $contact['state'])
                <li class="pb-1">
                    <i class="fas fa-map-marker-alt text-primary"></i> &nbsp;
                    {{ trim(($contact['street'] ?? '') . ', ' . ($contact['city'] ?? '') . ', ' . ($contact['state'] ?? '') . ' ' . ($contact['zip'] ?? ''), ', ') }}

                </li>
                @endif
                @if (!empty($contact['website']))
                <li class="pb-1 d-flex align-items-start">
                    <i class="fas fa-globe text-primary me-2 mt-1"></i>
                    <span class="website-container">
                        <a href="{{ $contact['website'] }}" target="_blank"
                            class="text-decoration-none website-link">
                            {{ $contact['website'] }}
                        </a>
                    </span>
                </li>
                @endif

            </ul>
            <!-- 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="contactId" value="{{ $contact['id'] }}">
                                <input type="hidden" id="type" value="contact">
                                <!-- 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" data-bs-dismiss="modal"
                                        aria-label="Close">Close</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Divider with gray color -->
            <hr style="background-color: #ccc;">
            <div class="p-2">
                <!-- details accordion  -->
                <div class="accordion-item mb-1">
                    <h2 class="accordion-header accordion-header-primary" id="profile-description-heading">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#profile-description-collapse" aria-expanded="true"
                            aria-controls="task-collapse">
                            <i class="fa-solid fa-list-ul"></i> &nbsp; Details
                        </button>
                    </h2>
                    <div id="profile-description-collapse" class="accordion-collapse collapse"
                        aria-labelledby="profile-description-heading" data-bs-parent="#accordion">
                        <div class="accordion-body">
                            <p class="m-0">
                                <span class="font-w700 me-1">Lead Status</span>
                                <span>{{ $contact['conact_pipeline_status'] }}</span>
                            </p>
                            <div class="d-flex align-items-center flex-wrap">
                                <p class="m-0 me-2">
                                    <span class="font-w700">Source:</span>
                                </p>
                                @php
                                // Split the contact_source string by commas and trim whitespace
                                $sourceTags = explode(',', $contact['contact_source'] ?? '');
                                $sourceTags = array_map('trim', $sourceTags); // Remove any extra whitespace
                                $sourceTagsCount = count($sourceTags); // Count the total number of sources
                                @endphp
                                @foreach ($sourceTags as $index => $tag)
                                @if ($index < 3 && $tag !=='' )
                                    <!-- Display only the first 3 sources -->
                                    <div
                                        class="badge bg-primary d-flex align-items-center p-0 px-2 rounded-pill tag me-1">
                                        <span class="me-2">{{ ucfirst($tag) }}</span>
                                    </div>
                                    @endif
                                    @endforeach
                                    @if ($sourceTagsCount > 3)
                                    <button type="button" class="badge bg-info contact-source-btn border"
                                        data-bs-toggle="modal" data-source="{{ json_encode($sourceTags) }}">
                                        More
                                    </button>
                                    @endif
                            </div>
                            <!-- Modal HTML for Sources -->
                            <div class="modal fade" id="sourceModal" tabindex="-1"
                                aria-labelledby="sourceModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="sourceModalLabel">All Sources</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body" id="modalSourceBody">
                                            <!-- Sources will be dynamically inserted here -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="m-0">
                                {{-- <span class="font-w700 me-1">Interested</span> --}}
                                @forelse ($contact['intrusted_in_properties'] as $index => $property)
                                <span class="">{{ $property }}</span>
                                @empty
                                <span class=""> -- </span>
                                @endforelse
                            </p>
                            <div class="d-flex align-items-center flex-wrap">
                                <strong class="pt-1 me-2">Tags:</strong>
                                @php
                                // Count the total number of tags
                                $tagsCount = count($contact['tags'] ?? []);
                                @endphp
                                @if(isset($contact['tags']))
                                @forelse ($contact['tags'] as $index => $tag)
                                @if ($index < 3 && $tag !=='' )
                                    <!-- Display only the first 3 tags -->
                                    <div
                                        class="badge bg-primary d-flex align-items-center p-0 px-2 rounded-pill tag me-1">
                                        <span>{{ str_replace('_', ' ', trim(ucfirst($tag))) }}</span>
                                    </div>
                                    @endif
                                    @empty
                                    @endforelse
                                    @if ($tagsCount > 3)
                                    <button type="button" class="badge bg-info contact-tags-btn border"
                                        data-bs-toggle="modal"
                                        data-tags="{{ json_encode(str_replace('_', ' ', $contact['tags'])) }}">
                                        More
                                    </button>
                                    @endif
                                @endif
                            </div>
                            <!-- Modal HTML -->
                            <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" id="modalTagsBody">
                                            <!-- Tags will be dynamically inserted here -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Add the new section here -->
                            <div class="mt-3">
                                <h5>Additional Details</h5>
                                <div class="p-0">
                                    <div class="py-1"><strong>Birthday: </strong> {{ $contact['birthday'] }}</div>
                                    <div class="py-1">
                                        <strong>Hobbies: </strong>
                                        @php
                                        $hobbies_list = !empty($contact['hobbies']) ? implode(', ', explode(',', $contact['hobbies'])) : '';
                                        @endphp
                                        {{ $hobbies_list }}
                                    </div>

                                    <div class="py-1"><strong>Spouse: </strong> {{ $contact['spouce'] }}</div>

                                    <div class="py-1">
                                        <strong>Children Name: </strong>
                                        @php
                                        $childrenList = !empty($contact['children_name']) ? implode(', ', explode(',', $contact['children_name'])) : '';
                                        @endphp
                                        {{ $childrenList }}
                                    </div>


                                    <div class="py-1"><strong>Anniversary of Purchase:</strong>
                                        {{ $contact['anniversary_date_of_purchase'] }}
                                    </div>
                                    <div class="py-1"><strong>Anniversary of Sale:</strong>
                                        {{ $contact['anniversary_date_of_sale'] }}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="accordion p-2">
                    <!--transactionAccordion  -->
                    <div class="accordion" id="transactionAccordion">
                        <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-regular fa-circle-user"></i> &nbsp; Transaction
                                </button>
                            </h2>
                            <div id="transaction-collapse" class="accordion-collapse collapse"
                                aria-labelledby="transaction-heading" data-bs-parent="#transactionAccordion">
                                <div class="accordion-body px-2">
                                    <ul class="list-unstyled px-3 pb-2">
                                        <li class="pb-1 text-center">
                                            <!-- <p class="m-0">Transaction Not Found</p> -->
                                            <p class="m-0">Coming Soon</p>

                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- History accordion  -->
                    <div class="accordion-item mb-1">
                        <h2 class="accordion-header accordion-header-primary" id="background-information-heading">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#background-information-collapse" aria-expanded="true"
                                aria-controls="task-collapse">
                                <i class="fa-solid fa-circle-info "></i> &nbsp; History
                            </button>
                        </h2>
                        <div id="background-information-collapse" class="accordion-collapse collapse"
                            aria-labelledby="background-information-heading" data-bs-parent="#accordion">
                            <div class="accordion-body">
                                <!-- <p class="m-0 px-5"> History Not Found</p> -->
                                 <p class="m-0 px-5"> Coming Soon</p>

                                

                            </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"></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">

                                    @forelse ($contact['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

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

{{-- script for Tages to view more tags of Tags  --}}

<script>
    document.querySelectorAll('.contact-tags-btn').forEach(button => {
        button.addEventListener('click', function() {
            // Get all the tags from the data-tags attribute
            const tags = JSON.parse(button.getAttribute('data-tags'));

            // Populate the modal with all tags
            const modalBody = document.querySelector('#modalTagsBody');
            modalBody.innerHTML = ''; // Clear existing content

            tags.forEach(tag => {
                const tagDiv = document.createElement('div');
                tagDiv.classList.add('badge', 'bg-primary', 'me-1', 'border');
                tagDiv.textContent = tag;
                modalBody.appendChild(tagDiv);
            });

            // Show the modal
            const modal = new bootstrap.Modal(document.querySelector('#tagsModal'));
            modal.show();
        });
    });
    $(document).ready(function() {
        // Handle form submission
        $('#addPhoneForm').on('submit', function(e) {
            e.preventDefault();
            let phone_type = $('#phone_type').val();
            let phone_number = $('#phone_number_full').val();
            // alert(phone_number);
            let phone_extension = $('#phone_extension').val();
            let contactId = $('#contactId').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/' + contactId,
                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();
                },
                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',
                        });
                    }
                },
            });
        });

        // Dynamic layout adjustment
        $('#phone_type').on('change', function() {
            if ($(this).val() === 'office') {
                $('#phoneNumberCol').removeClass('col-md-8').addClass(
                    'col-md-8'); // Shrink phone number input
                $('#extensionCol').show(); // Show extension input
            } else {
                $('#phoneNumberCol').removeClass('col-md-6').addClass(
                    'col-md-8'); // Expand phone number input
                $('#extensionCol').hide(); // Hide extension input
            }
        });
    });

    $(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.phoneDeleteBtn').on('click', function(event) {
            event.preventDefault();

            var phoneId = $(this).data('id');

            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',
                // reverseButtons: true
                customClass: {
                    confirmButton: "btn-confirm",
                    cancelButton: "btn-cancel",
                },
            }).then((result) => {
                if (result.isConfirmed) {
                    // Send AJAX request to delete the phone
                    $.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',
                                    confirmButtonText: 'OK',
                                    confirmButtonColor: '#17A2B8'
                                });
                                // window.location.reload();
                            } else {
                                Swal.fire({
                                    title: 'Failed!',
                                    text: 'There was an error deleting the phone.',
                                    icon: 'error',
                                    confirmButtonText: 'OK',
                                    confirmButtonColor: '#17A2B8'
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire({
                                title: 'Error!',
                                text: 'There was an error with the request.',
                                icon: 'error',
                                confirmButtonText: 'OK',
                                confirmButtonColor: '#17A2B8'
                            });
                        }

                    });
                } else {
                    // User clicked 'No' on confirmation, do nothing
                    Swal.fire({
                        title: 'Cancelled',
                        text: 'The phone number is safe.',
                        icon: 'info',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#17A2B8'
                    });
                }
            });
        });
    });
</script>

{{-- script for Source to view More tags of Source  --}}
<script>
    document.querySelectorAll('.contact-source-btn').forEach(button => {
        button.addEventListener('click', function() {
            // Get all the source tags from the data-source attribute
            const sourceTags = JSON.parse(button.getAttribute('data-source'));

            // Populate the modal with all source tags
            const modalBody = document.querySelector('#modalSourceBody');
            modalBody.innerHTML = ''; // Clear existing content

            sourceTags.forEach(tag => {
                const tagDiv = document.createElement('div');
                tagDiv.classList.add('badge', 'bg-primary', 'me-1', 'border');
                tagDiv.textContent = tag;
                modalBody.appendChild(tagDiv);
            });

            // Show the modal
            const modal = new bootstrap.Modal(document.querySelector('#sourceModal'));
            modal.show();
        });
    });


    // Click event using the reusable function
    $(".delete-icon").on("click", function() {
        var socialId = $(this).data("id");
        var deleteUrl = "/delete-socialmedia/" + socialId;

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