@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6">
    <h2 class="text-3xl font-semibold text-gray-700 mb-6 flex items-center">
        <i class="fas fa-eye text-blue-500 mr-3"></i> Preview: {{ $periodLabel }}
    </h2>

    <div class="bg-yellow-50 border border-yellow-300 text-yellow-800 p-4 rounded-lg mb-6 flex items-start">
        <i class="fas fa-exclamation-triangle mr-3 mt-1"></i>
        <p>Nothing has been saved yet. Review the numbers below, then confirm to write this period into every member's dividend history. This cannot be silently undone once members see it.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
        <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-300">
            <p class="text-sm text-gray-500">Total Cash Interest Collected</p>
            <p class="text-2xl font-bold text-gray-800">{{ number_format($totalInterest, 2) }}</p>
        </div>
        <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-300">
            <p class="text-sm text-gray-500">Total Shares</p>
            <p class="text-2xl font-bold text-gray-800">{{ number_format($totalShares, 2) }}</p>
        </div>
        <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-300">
            <p class="text-sm text-gray-500">Rate per Share</p>
            <p class="text-2xl font-bold text-gray-800">{{ number_format($ratePerShare, 4) }}</p>
        </div>
    </div>

    <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">Dividend</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($preview 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->dividend, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <form method="POST" action="{{ route('dividends.store') }}" class="flex justify-end gap-3">
        @csrf
        <input type="hidden" name="period_label" value="{{ $periodLabel }}">
        <input type="hidden" name="period_end" value="{{ $periodEnd }}">
        <a href="{{ route('dividends.index') }}" class="bg-gray-200 text-gray-700 px-6 py-3 rounded-full hover:bg-gray-300">
            <i class="fas fa-times mr-2"></i> Cancel
        </a>
        <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-check mr-2"></i> Confirm & Save This Period
        </button>
    </form>
</div>
@endsection