@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">
        Pending Requests 
    </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('savings-create'))
                <a href="{{ route('savings.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 Savings </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>
    <div class="w-full overflow-hidden rounded-lg shadow-xs p-2">
        <div class="w-full overflow-x-auto">
            <table id="example" class="w-full whitespace-no-wrap display" style="width:100%">
                <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">Date </th>
                        <th class="px-4 py-3">Client</th>
                        <th class="px-4 py-3">Amount </th>
                        <th class="px-4 py-3">Use Option </th>
                        <th class="px-4 py-3">Status</th>
                        @if (Auth::user()->can('savings-request-approve') || Auth::user()->can('savings-request-decline'))
                        <th class="px-4 py-3">Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                    @forelse ($savings 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="font-semibold">{{ $person?->date }}</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?->client?->fullname }}</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">{{ number_format($person?->amount) }}</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?->use_option }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-xs">
                                @if ($person?->level == 3)
                                <span
                                class="px-2 py-1 font-semibold leading-tight text-yellow-700 bg-yellow-100 rounded-full dark:bg-yellow-700 dark:text-yellow-100"
                              >
                               Manager's Pending
                              </span>
                                @elseif ($person?->level == 2)
                                <span
                                  class="px-2 py-1 font-semibold leading-tight text-yellow-700 bg-yellow-100 rounded-full dark:bg-yellow-700 dark:text-yellow-100"
                                >
                                  Pending
                                </span>
                                @else
                                @endif
                                
                            </td>
                            @if (Auth::user()->can('savings-request-approve') || Auth::user()->can('savings-request-decline'))
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-4 text-sm">
                                    @if (Auth::user()->can('savings-request-approve'))
                                    <form action="{{ route('savings.request_approve', $person?->level) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="id" value="{{$person?->id}}" />
                                    <button type="submit" href="{{route('savings.request_approve', $person?->level) }}" onclick="return confirm('