@extends('layout.main')

@section('content')

    <div class="container grid px-6 mx-auto">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Client
        </h2>
        <div class="flex flex-col flex-wrap mb-8 space-y-4 md:flex-row md:items-end md:space-x-4">
            <div>
                @if (Auth::user()->can('clients-create'))
                    <a href="{{ route('clients.create') }}"
                        class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                        <span>Add Client </span>
                        <svg class="w-4 h-4 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                            <path
                                d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
                        </svg>
                    </a>
                @endif
            </div>
        </div>
        <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            Clients List
        </h4>
        <div class="w-full overflow-hidden rounded-lg shadow-xs p-2">
            <div class="w-full overflow-x-auto p-2">
                <table id="example" class="w-full whitespace-no-wrap">
                    <thead>
                        <tr
                            class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                            <th class="px-4 py-3">Client Account Number</th>
                            <th class="px-4 py-3">Full Name </th>
                            <th class="px-4 py-3">Gender</th>
                            <th class="px-4 py-3">Phone Number</th>
                            <th class="px-4 py-3">Location</th>
                            {{-- <th class="px-4 py-3">Date Of Birth </th> --}}
                            @if (Auth::user()->can('clients-edit') || Auth::user()->can('clients-delete'))
                                <th class="px-4 py-3">Actions</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                        @forelse ($client as $person)
                            <tr class="text-gray-700 dark:text-gray-400">
                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">

                                        <div>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">
                                                {{ $person->acount_number }}
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">
                                        <!-- Avatar with inset shadow -->
                                        <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
                                            <img class="object-cover w-full h-full rounded-full"
                                                src="{{ Storage::url($person->avatar) }}" alt="" loading="lazy" />
                                            <div class="absolute inset-0 rounded-full shadow-inner" aria-hidden="true">
                                            </div>
                                        </div>
                                        <div>
                                            <p class="font-semibold">{{ $person->fullname }}</p>
                                            {{-- <p class="text-xs text-gray-600 dark:text-gray-400">
                                                10x Developer
                                              </p> --}}
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">

                                        <div>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">
                                                {{ $person->gender }}
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">

                                        <div>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">{{ $person->phone }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">

                                        <div>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">
                                                {{ $person->location }}
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                @if (Auth::user()->can('clients-edit') || Auth::user()->can('clients-delete') || Auth::user()->can('clients-show'))
                                    <td class="px-4 py-3">
                                        <div class="flex items-center space-x-4 text-sm">
                                            @if (Auth::user()->can('clients-edit'))
                                                <a href="{{ route('clients.edit', $person->id) }}"
                                                    class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                                                    aria-label="Edit">
                                                    <svg class="w-5 h-5" aria-hidden="true" fill="currentColor"
                                                        viewBox="0 0 20 20">
                                                        <path
                                                            d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z">
                                                        </path>
                                                    </svg>
                                                </a>
                                            @endif
                                            @if (Auth::user()->can('clients-show'))
                                                <a href="{{ route('clients.show', $person->id) }}"
                                                    title="View Client Profile"
                                                    class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                                                    aria-label="Edit">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-eye-fill w-5 h-5"
                                                        viewBox="0 0 16 16">
                                                        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0" />
                                                        <path
                                                            d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7" />
                                                    </svg>
                                                </a>
                                            @endif
                                            @if (Auth::user()->can('clients-delete'))                                            
                                                @if ($person->client_loans_count <= 0)
                                                <form action="{{ route('clients.destroy', $person->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button onclick="return confirm('