@extends('layout.main')

@section('content')

<div class="container mx-auto px-4 py-8" x-data="{ activeTab: 'tasks' }">
    <div class="flex items-center mb-8">
      <img class=" rounded-full mr-4" style="width: 5rem; height:5rem;" src="@if($saving->client->fullname ) {{Storage::url($saving->client->avatar)}} @else{{asset('img/default.jpg')}} @endif" alt="Client Avatar">
      <div>
        <h1 class="text-xl font-bold">{{ $saving->client->fullname }}</h1>
        <p class="text-gray-500 text-sm">ID Number: {{ $saving->client->idnumber  }}</p>
        <p class="text-gray-500 text-sm">Location: {{ $saving->client->location  }}</p>
        <p class="text-gray-500 text-sm">Phone: {{ $saving->client->phone  }}</p>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="bg-gray-100 p-4 rounded-md">
        <h3 class="font-bold mb-2">Amount in Saving</h3>
        <ul class="list-disc space-y-2">
          {{-- <p>Email: {{ $saving->client->idnumber  }}</p> --}}
          <p>{{ number_format($saving->remaining_savings ) }}</p>
        </ul>
      </div>
      <div class="bg-gray-100 p-4 rounded-md">
        <h3 class="font-bold mb-2">Amount Used</h3>
        <p>{{ number_format($saving->used_savings ) }}</p>
      </div>
    </div>
    <div class="  mt-6">
        @if (Auth::user()->can('savings-add-deposits'))
        <a href="{{route('savings.deposits',$saving->slug)}}"
        class=" items-center 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"
            type="submit">
            
          <span>{{ __('Add Savings Deposits') }}</span>
        </a>
        @endif
        @if (Auth::user()->can('savings-request-release'))
        <a href="{{route('savings.release',[$saving->remaining_savings,$saving->client_id])}}"
        class=" items-center 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"
            type="submit">
            
          <span>{{ __('Request Release') }}</span>
        </a>
        @endif
    </div>

    <div class="mt-8">
        <ul class="flex items-center border-b border-gray-200 dark:border-gray-700 mb-4">
            <li class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" :class="{ active: activeTab === 'tasks' }">
              <a href="#" @click.prevent="activeTab = 'tasks'">Savings History</a>
            </li>
            <li class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" :class="{ active: activeTab === 'notes' }">
              <a href="#" @click.prevent="activeTab = 'notes'">Release Requests</a>
            </li>
            {{-- <li class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" :class="{ active: activeTab === 'invoices' }">
              <a href="#" @click.prevent="activeTab = 'invoices'">Savings</a>
            </li> --}}
          </ul>
  
        <div class="mt-4">
            <div x-show="activeTab === 'tasks'" class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800 active">
                <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">Amount </th>
                                <th class="px-4 py-3">Added By</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                            @forelse ($saving->deposits 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->deposit_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">{{ 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->creator }}
                                                </p>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                
                            <tr>
                                <td colspan="5" class="text-center">No Saving Deposits Found</td>
                            </tr>
                        @endforelse
        
        
        
                    </tbody>
        
                    </table>
                </div>
              </div>
              <div x-show="activeTab === 'notes'" class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800">
                <div class="w-full overflow-x-auto">
                    <table id="example2" 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">Amount </th>
                                <th class="px-4 py-3">Use Option </th>
                                <th class="px-4 py-3">Reason </th>
                                <th class="px-4 py-3">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                            @forelse ($saving->used_savings_data 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">{{ 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">
                                        <div class="flex items-center text-sm">        
                                            <div>
                                                <p class="text-xs text-gray-600 dark:text-gray-400">
                                                    {{ $person->reason }}
                                                </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>
                                </tr>
                            @empty
                                
                            <tr>
                                <td  class="text-center"></td>
                                <td class="text-center">No Used Savings Found</td>
                                <td class="text-center"></td>
                                <td class="text-center"></td>
                                <td class="text-center"></td>
                            </tr>
                        @endforelse
        
        
        
                    </tbody>
        
                    </table>
                </div>
              </div>
              <div x-show="activeTab === 'invoices'" class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800">
                
              </div>
        </div>
      </div>
  </div>

@endsection
@push('scripts')
    <script>

$(document).ready(function() {
    $('#example').DataTable();
    $('#example2').DataTable();
});
    </script>
    
    @endpush('scripts')