{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title }}
@endsection

{{-- Content --}}
@section('content')
    <!--begin::Content-->
    <div class="row">
        <!--begin::Contact groups-->
        <div class="col-lg-6 col-xl-3">
            <div class="card card-flush">
                <div class="card-header pt-7">
                    <div class="card-title">
                        <h2>Contact Groups</h2>
                    </div>
                </div>
                <div class="card-body pt-5">
                    <div class="d-flex flex-column gap-5">
                        <a href="#" class="fs-6 fw-bolder text-gray-800 text-hover-primary text-active-primary active"
                            id="showAllData">
                            All
                        </a>
                    </div>
                    <br>
                    <div class="d-flex flex-column gap-5">
                        @foreach ($userGroupCount ?? [] as $roleValue)
                            <div class="d-flex flex-stack role" data-id="{{ $roleValue['role_id'] }}">
                                <a href="javascript:;"
                                    class="fs-6 fw-bolder text-gray-800 text-hover-primary text-active-primary active">
                                    {{ $roleValue['role_name'] }}
                                </a>
                                <div class="badge badge-light-primary">{{ $roleValue['role_count'] }}</div>
                            </div>
                        @endforeach
                    </div>

                    <div class="separator my-7"></div>
                </div>
            </div>
        </div>
        <!--end::Contact groups-->
        <!--begin::Search-->
        <div class="col-lg-6 col-xl-3">
            <!--begin::Contacts-->
            <div class="card card-flush" id="kt_contacts_list">
                <!--begin::Card header-->
                <div class="card-header pt-7" id="kt_contacts_list_header">
                    <!--begin::Form-->
                    <form class="d-flex align-items-center position-relative w-100 m-0" autocomplete="off">
                        <!--begin::Icon-->
                        <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                        <span
                            class="svg-icon svg-icon-3 svg-icon-gray-500 position-absolute top-50 ms-5 translate-middle-y">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
                                    transform="rotate(45 17.0365 15.1223)" fill="black" />
                                <path
                                    d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                    fill="black" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <!--end::Icon-->
                        <!--begin::Input-->
                        <input type="text" class="form-control form-control-solid ps-13 user_search" id="user_search"
                            name="search" value="" placeholder="Search contacts" />
                        <!--end::Input-->
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-5" id="kt_contacts_list_body">
                    <!--begin::List-->
                    <div class="scroll-y me-n5 pe-5 h-300px h-xl-auto" data-kt-scroll="true"
                        data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
                        data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_contacts_list_header"
                        data-kt-scroll-wrappers="#kt_content, #kt_contacts_list_body"
                        data-kt-scroll-stretch="#kt_contacts_list, #kt_contacts_main" data-kt-scroll-offset="5px">
                        @foreach ($contactData ?? [] as $cData)
                            <!--begin::User-->
                            <div class="d-flex flex-stack py-4" onclick="fetchUserShowData(this)"
                                data-id="{{ $cData['id'] }}" style="cursor: pointer">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-50px symbol-circle">
                                        @if (empty($cData['image']))
                                        @php
                                            if (!empty($cData['first_name'])) {
                                                if(empty($cData['last_name'])){
                                                    $initials = strtoupper(substr($cData['first_name'], 0, 1));
                                                }else{
                                                    $initials = strtoupper(substr($cData['first_name'], 0, 1) . substr($cData['last_name'], 0, 1));
                                                }
                                            }
                                        @endphp
                                            <div class="symbol-label fs-2 fw-semibold text-success">{{ $initials??'' }}</div>
                                        @else
                                            <img alt="Avatar" src="{{ asset('/uploads/directory_logs/' . $cData['image']) }}" />
                                        @endif
                                    </div>
                                    <!--end::Avatar-->
                                    <!--begin::Details-->
                                    <div class="ms-4">
                                        <!-- Anchor tag to open full details -->
                                        <a class="fs-6 fw-bolder text-gray-900 text-hover-primary mb-2">
                                            {{ $cData['first_name'] ?? '' }} {{ $cData['last_name'] ?? '' }}
                                        </a>
                                        <div class="fw-bold fs-7 text-muted">{{ $cData['mobile_phone'] ?? '' }}</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->
                            </div>
                        @endforeach
                        <!--end::User-->
                    </div>
                    <!--end::List-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Contacts-->
        </div>
        <!--end::Search-->

        <!--begin::Content-->
        <div class="col-xl-6">
            <!--begin::Card-->
            <div class="card card-flush h-lg-100" id="kt_contacts_main">
                <!--begin::Card body-->
                <div class="card-body p-0">
                    <!--begin::Wrapper-->
                    <div class="card-px text-center py-20 my-10">
                        <!--begin::Title-->
                        <h2 class="fs-2x fw-bolder mb-10">Welcome to the My Contacts</h2>
                        <!--end::Title-->
                        <!--begin::Description-->
                        <p class="text-gray-400 fs-4 fw-bold mb-10">It's time to expand our contacts.
                            <br />Kickstart your contacts growth by adding your next contact.
                        </p>
                        <!--end::Description-->
                    </div>
                    <!--end::Wrapper-->
                    <!--begin::Illustration-->
                    <div class="text-center px-4">
                        <img class="mw-100 mh-300px" alt="" src="{{ asset('New folder\5.png') }}" />
                    </div>
                    <!--end::Illustration-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Content-->

    </div>
@endsection
<!--end::Content-->
@section('scripts')
    @include('backend.master.my_contacts.comman_script')
@endsection