@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-3xl font-semibold text-gray-700 flex items-center">
            <i class="fas fa-coins text-yellow-500 mr-3"></i> Dividends
        </h2>
        <a href="{{ route('dividends.index') }}#calculate"
            class="bg-gradient-to-r from-green-600 to-green-500 text-white px-6 py-3 rounded-full shadow-md hover:from-green-700 hover:to-green-600 transition flex items-center">
            <i class="fas fa-calculator mr-2"></i> Calculate New Period
        </a>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
        <div class="bg-gradient-to-br from-yellow-500 to-yellow-400 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm opacity-90">Total Dividend — {{ $selectedPeriod }}</p>
                    <p class="text-2xl font-bold mt-1">{{ number_format($summary->total_dividend ?? 0, 2) }}</p>
                </div>
                <i class="fas fa-hand-holding-usd text-3xl opacity-75"></i>
            </div>
            <p class="text-xs mt-3 opacity-80">{{ $summary->member_count ?? 0 }} members paid</p>
        </div>

        <div class="bg-gradient-to-br from-blue-600 to-blue-400 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm opacity-90">Total Shares — {{ $selectedPeriod }}</p>
                    <p class="text-2xl font-bold mt-1">{{ number_format($summary->total_shares ?? 0, 2) }}</p>
                </div>
                <i class="fas fa-layer-group text-3xl opacity-75"></i>
            </div>
            <p class="text-xs mt-3 opacity-80">Rate: {{ number_format(($summary->total_shares ?? 0) > 0 ? ($summary->total_dividend / $summary->total_shares) : 0, 4) }} / share</p>
        </div>

        <div class="bg-gradient-to-br from-purple-600 to-purple-400 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm opacity-90">All-Time Dividends Paid</p>
                    <p class="text-2xl font-bold mt-1">{{ number_format($allTimeTotal, 2) }}</p>
                </div>
                <i class="fas fa-piggy-bank text-3xl opacity-75"></i>
            </div>
            <p class="text-xs mt-3 opacity-80">As of latest closed period</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-300 mb-6">
        <form method="GET" action="{{ route('dividends.index') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-calendar-alt text-gray-400 mr-1"></i> Period
                </label>
                <select name="period" onchange="this.form.submit()" class="w-full p-3 border border-gray-300 rounded-md">
                    @foreach ($periods as $p)
                        <option value="{{ $p }}" @selected($selectedPeriod === $p)>{{ $p }}</option>
                    @endforeach
                </select>
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-search text-gray-400 mr-1"></i> Search Member
                </label>
                <input type="text" name="search" value="{{ request('search') }}"
                    class="w-full p-3 border border-gray-300 rounded-md" placeholder="Member name...">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Rows per page</label>
                <select name="per_page" onchange="this.form.submit()" class="w-full p-3 border border-gray-300 rounded-md">
                    <option value="10" @selected($perPage === 10)>10</option>
                    <option value="25" @selected($perPage === 25)>25</option>
                    <option value="50" @selected($perPage === 50)>50</option>
                    <option value="100" @selected($perPage === 100)>100</option>
                </select>
            </div>
            <div class="md:col-span-4 flex justify-end">
                <button type="submit" class="bg-blue-500 text-white px-6 py-2.5 rounded-full hover:bg-blue-600">
                    <i class="fas fa-filter mr-2"></i> Apply
                </button>
            </div>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-300 mb-8">
        <table class="min-w-full table-auto border-collapse">
            <thead class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white">
                <tr>
                    <th class="py-3 px-4 text-left">Member</th>
                    <th class="py-3 px-4 text-left">Shares</th>
                    <th class="py-3 px-4 text-left">Period Dividend</th>
                    <th class="py-3 px-4 text-left">Cumulative (all-time)</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($rows as $row)
                    <tr class="border-t hover:bg-gray-50">
                        <td class="py-3 px-4">{{ $row->name }}</td>
                        <td class="py-3 px-4">{{ number_format($row->shares, 2) }}</td>
                        <td class="py-3 px-4 font-semibold text-green-700">{{ number_format($row->period_dividend, 2) }}</td>
                        <td class="py-3 px-4">{{ number_format($row->cumulative_dividend, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="mt-6">{{ $rows->links() }}</div>
    </div>

    <!-- Calculate New Period -->
    <div id="calculate" class="bg-white p-6 rounded-2xl shadow-md border border-gray-300">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-calculator text-green-500 mr-2"></i> Calculate a New Period
        </h3>
        <p class="text-sm text-gray-500 mb-4">
            This previews the dividend using current savings balances and real cash interest collected since the last closed period — nothing is saved until you confirm on the next screen.
        </p>
        @if ($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 p-4 rounded-lg mb-4">
        <ul class="list-disc list-inside">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
        <form method="POST" action="{{ route('dividends.preview') }}" class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
            @csrf
            <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Period End Date</label>
    <input type="date" name="period_end" id="period_end" required
        onchange="document.getElementById('period_label_display').value = new Date(this.value).toLocaleString('en-US', { month: 'short', year: 'numeric' }).toUpperCase()"
        class="w-full p-3 border border-gray-300 rounded-md">
</div>
<div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Period Label (auto)</label>
    <input type="text" id="period_label_display" readonly
        class="w-full p-3 border border-gray-200 bg-gray-100 rounded-md text-gray-600">
</div>
            <button type="submit" class="bg-gradient-to-r from-green-600 to-green-500 text-white px-6 py-3 rounded-full shadow-md hover:from-green-700 hover:to-green-600 transition">
                <i class="fas fa-eye mr-2"></i> Preview
            </button>
        </form>
    </div>
</div>
@endsection