@section('page-title')
    - {{ $clientDetails->name }}
@endsection
@section('page-styles')
    <style>
        .hero-bg {
            background-image: url('{{ asset('assets/media/images/2600x1200/bg-1.png') }}');
        }

        .dark .hero-bg {
            background-image: url('{{ asset('assets/media/images/2600x1200/bg-1-dark.png') }}');
        }
    </style>
@endsection



@include('pages.dashboard.includes.client.common.client-header')


<div class="container-fixed">
    <div
        class="flex flex-nowrap items-center lg:items-end justify-between border-b border-b-gray-200 dark:border-b-coal-100 gap-6 mb-5 lg:mb-10">


        @include('pages.dashboard.super-admin.clients.includes.tab-links')

        <div class="flex items-center lg:pb-4 gap-2.5">
            <button class="dropdown-toggle btn btn-sm btn-primary">
                <i class="ki-filled ki-notepad-edit">
                </i>
                Edit Profile
            </button>

        </div>

    </div>
</div>
<div class="container-fixed">
    <!-- begin: grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 lg:gap-7.5">

        <div class="col-span-1 h-full">
            <div class="flex flex-col gap-5 lg:gap-7.5">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            Company Highlights
                        </h3>
                    </div>
                    <div class="card-body pt-3.5 pb-3.5">
                        <table class="table-auto">
                            <tbody>
                            <tr>
                                <td class="text-sm font-medium text-gray-500 pb-3 pe-4 lg:pe-10">
                                    No. Employees:
                                </td>
                                <td class="text-sm font-medium text-gray-800 pb-3">
                                    10
                                    {{-- {{$clientDetails->employees->count()}} --}}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-sm font-medium text-gray-500 pb-3 pe-4 lg:pe-10">
                                    No. Departments:
                                </td>
                                <td class="text-sm font-medium text-gray-800 pb-3">
                                    {{$clientDetails->clientDepartments()->get()->count()}}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-sm font-medium text-gray-500 pb-3 pe-4 lg:pe-10">
                                    Subscription:
                                </td>
                                <td class="text-sm font-medium text-gray-800 pb-3">
                                    <span class="badge badge-sm badge-success badge-outline">
                                        {{$clientDetails->license->name}}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-sm font-medium text-gray-500 pb-3 pe-4 lg:pe-10">
                                    Outstanding Invoices:
                                </td>
                                <td class="text-sm font-medium text-gray-800 pb-3">
                                    <span class="badge badge-sm badge-danger badge-outline">
                                        {{$clientDetails->invoices->whereIn('invoice_status', ['Pending', 'pending'])->count()}}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-sm font-medium text-gray-500 pb-3 pe-4 lg:pe-10">
                                    Company Admin:
                                </td>
                                <td class="text-sm font-medium text-gray-800 pb-3">
                                    <a class="link" href="#">
                                        {{-- {{$clientDetails->administrator->user->name}} {{$clientDetails->administrator->user->surname}} --}}
                                    </a>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            About
                        </h3>
                    </div>
                    <div class="card-body pt-4">
                        <div class="grid gap-2.5 mb-1">
                            <p class="text-sm text-gray-700 font-medium leading-5.5">
                                The South African National Blood Service (SANBS) is an independent non-profit organisation and a leader in the discipline of blood transfusion.
                                {{-- {{$clientDetails->about_description}} --}}
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-span-1 lg:col-span-2 h-full">
            <div class="flex flex-col gap-5 lg:gap-7.5 h-full">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            Company Profle
                        </h3>
                    </div>
                    <div class="card-body">
                        <h3 class="text-base font-semibold text-gray-900 leading-none mb-5">
                            Headquarter
                        </h3>
                        <div class="flex flex-wrap items-center gap-5 mb-10">

                            <div class="flex flex-col gap-2.5">
                                <div class="flex items-center gap-2.5">
                                        <span class="">
                                            <i class="ki-filled ki-dribbble text-lg text-gray-500">
                                            </i>
                                        </span>
                                    <a class="link text-sm font-medium" href="#">
                                        {{$clientDetails->website}}
                                    </a>
                                </div>
                                <div class="flex items-center gap-2.5">
                                        <span class="">
                                            <i class="ki-filled ki-facebook text-lg text-gray-500">
                                            </i>
                                        </span>
                                    <a class="link text-sm font-medium" href="#">
                                        {{$clientDetails->facebook_handler !== null ? $clientDetails->facebook_handler: '-' }}
                                    </a>
                                </div>
                                <div class="flex items-center gap-2.5">
                                        <span class="">
                                            <i class="ki-filled ki-youtube text-lg text-gray-500">
                                            </i>
                                        </span>
                                    <a class="link text-sm font-medium" href="#">
                                        {{$clientDetails->youtube_handler !== null ? $clientDetails->youtube_handler: '-' }}
                                    </a>
                                </div>
                                <div class="flex items-center gap-2.5">
                                        <span class="">
                                            <i class="ki-filled ki-whatsapp text-lg text-gray-500">
                                            </i>
                                        </span>
                                    <span class="text-sm font-medium text-gray-800">
                                            {{$clientDetails->phone_number}}
                                        </span>
                                </div>
                                <div class="flex items-center gap-2.5">
                                        <span class="">
                                            <i class="ki-filled ki-map text-lg text-gray-500">
                                            </i>
                                        </span>
                                    <span class="text-sm font-medium text-gray-800">
                                            {{$clientDetails->physical_address}}
                                        </span>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col gap-4 mb-2.5">
                            <div class="text-md font-semibold text-gray-900">
                                Products
                            </div>
                            <div class="flex flex-wrap gap-2.5">
                                @foreach($clientDetails->clientproduct as $clientproduct)
                                    <span class="badge badge-outline">
                                        {{$clientproduct->product->short_name}}
                                    </span>
                                @endforeach

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


            </div>
        </div>


    </div>
    <!-- end: grid -->
</div>

@section('page-modals')
@endsection
@section('page-scripts')
@endsection