<x-app-layout>
    <x-slot name="header">
        {{ $shareholder->name }} — {{ __('Transactions') }}
    </x-slot>

    <div class="row g-4">
        {{-- ─── Left: Summary + Add Transaction ───────────────── --}}
        <div class="col-12 col-xl-4">
            {{-- Summary Cards --}}
            <div class="row g-2 mb-3">
                <div class="col-6">
                    <div class="card border-0 shadow-sm text-bg-success text-center py-2">
                        <div class="small">{{ __('Investment') }}</div>
                        <div class="fw-bold">{{ number_format($shareholder->total_investment, 2) }}</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-0 shadow-sm text-bg-danger text-center py-2">
                        <div class="small">{{ __('Withdrawn') }}</div>
                        <div class="fw-bold">{{ number_format($shareholder->total_withdrawal, 2) }}</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-0 shadow-sm text-bg-primary text-center py-2">
                        <div class="small">{{ __('Profit') }}</div>
                        <div class="fw-bold">{{ number_format($shareholder->total_profit, 2) }}</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-0 shadow-sm text-bg-warning text-center py-2">
                        <div class="small">{{ __('Profit W/D') }}</div>
                        <div class="fw-bold">{{ number_format($shareholder->total_profit_withdrawal, 2) }}</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-0 shadow-sm text-center py-2" style="background:#e8f5e9">
                        <div class="small text-success">{{ __('Net Investment') }}</div>
                        <div class="fw-bold text-success">{{ number_format($shareholder->net_investment, 2) }}</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-0 shadow-sm text-center py-2" style="background:#e3f2fd">
                        <div class="small text-primary">{{ __('Net Profit') }}</div>
                        <div class="fw-bold text-primary">{{ number_format($shareholder->net_profit, 2) }}</div>
                    </div>
                </div>
            </div>

            {{-- Add Transaction Form --}}
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white fw-semibold border-0 pt-3 pb-0">
                    <i class="bi bi-plus-circle me-1 text-primary"></i>{{ __('Add Transaction') }}
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('shareholders.transactions.store', $shareholder) }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Date') }} <span class="text-danger">*</span></label>
                            <input type="date" name="transaction_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Type') }} <span class="text-danger">*</span></label>
                            <select name="type" class="form-select" required>
                                <option value="">{{ __('— Select —') }}</option>
                                <option value="investment">{{ __('Investment') }}</option>
                                <option value="withdrawal">{{ __('Withdrawal (Capital)') }}</option>
                                <option value="profit">{{ __('Profit') }}</option>
                                <option value="profit_withdrawal">{{ __('Profit Withdrawal') }}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Amount') }} <span class="text-danger">*</span></label>
                            <input type="number" name="amount" class="form-control" min="0.01" step="0.01" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Notes') }}</label>
                            <input type="text" name="notes" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-primary w-100">{{ __('Save Transaction') }}</button>
                    </form>
                </div>
            </div>

            <a href="{{ route('shareholders.index') }}" class="btn btn-secondary btn-sm mt-3 w-100">
                <i class="bi bi-arrow-left me-1"></i>{{ __('Back to Shareholders') }}
            </a>
        </div>

        {{-- ─── Right: Transaction History ─────────────────────── --}}
        <div class="col-12 col-xl-8">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white fw-semibold border-0 pt-3 pb-0">
                    <i class="bi bi-clock-history me-1 text-secondary"></i>{{ __('Transaction History') }}
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('Date') }}</th>
                                <th>{{ __('Type') }}</th>
                                <th class="text-end">{{ __('Amount') }}</th>
                                <th>{{ __('Notes') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($transactions as $tx)
                                <tr>
                                    <td>{{ $tx->transaction_date->format('d M Y') }}</td>
                                    <td>
                                        <span class="badge bg-{{ $tx->type_badge }}">{{ $tx->type_label }}</span>
                                    </td>
                                    <td class="text-end fw-semibold">{{ number_format($tx->amount, 2) }}</td>
                                    <td class="text-muted small">{{ $tx->notes ?? '—' }}</td>
                                    <td>
                                        <form method="POST" action="{{ route('shareholders.transactions.destroy', [$shareholder, $tx]) }}" onsubmit="return confirm('{{ __('Delete this transaction?') }}')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">{{ __('No transactions yet.') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($transactions->hasPages())
                    <div class="card-footer bg-white border-0">
                        {{ $transactions->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>
