@extends('layouts.main')

@section('title', 'Transfers')

@section('content')
<div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">
        <i class="fas fa-exchange-alt mr-2 text-indigo-600 dark:text-indigo-400"></i>Transfer Money
    </h2>
    <p class="text-gray-500 dark:text-gray-400">Move money between accounts</p>
</div>

@if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg mb-4">
        {{ session('success') }}
    </div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <!-- Transfer Form -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">New Transfer</h3>
        
        <form action="{{ route('transfers.store') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">From Account *</label>
                    <select name="from_account_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
                        <option value="">-- Select Source Account --</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ ucfirst($account->type) }}) - ${{ number_format($account->balance, 2) }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">To Account *</label>
                    <select name="to_account_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
                        <option value="">-- Select Destination Account --</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ ucfirst($account->type) }}) - ${{ number_format($account->balance, 2) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Amount *</label>
                    <input type="number" name="amount" step="0.01" min="0.01" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="0.00" required>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Transfer Date *</label>
                    <input type="date" name="transfer_date" value="{{ date('Y-m-d') }}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description *</label>
                <input type="text" name="description" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Reason for transfer" required>
            </div>
            
            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">
                <i class="fas fa-exchange-alt mr-2"></i>Transfer Now
            </button>
        </form>
    </div>
    
    <!-- Quick Stats -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Account Balances</h3>
        
        @foreach($accounts->groupBy('type') as $type => $typeAccounts)
            <div class="mb-4">
                <p class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase mb-2">{{ $type }}</p>
                @foreach($typeAccounts as $account)
                    <div class="flex justify-between py-2 border-b dark:border-gray-700">
                        <span class="text-gray-700 dark:text-gray-300">{{ $account->name }}</span>
                        <span class="font-medium text-gray-800 dark:text-white">${{ number_format($account->balance, 2) }}</span>
                    </div>
                @endforeach
            </div>
        @endforeach
    </div>
</div>

<!-- Recent Transfers -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
    <div class="px-6 py-4 border-b dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Recent Transfers</h3>
    </div>
    
    @php
    $transferGroups = $transfers->groupBy('reference_id');
    @endphp
    
    <table class="w-full">
        <thead class="bg-gray-50 dark:bg-gray-700">
            <tr class="text-left text-gray-500 dark:text-gray-400 text-sm">
                <th class="px-6 py-4">Date</th>
                <th class="px-6 py-4">From Account</th>
                <th class="px-6 py-4">To Account</th>
                <th class="px-6 py-4">Amount</th>
                <th class="px-6 py-4">Description</th>
                <th class="px-6 py-4">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
            @forelse($transferGroups as $refId => $group)