@extends('layouts.app')

@section('title', 'Customer Statement')

@push('styles')
<style>
h1 { color: var(--text-primary); }
p.text-secondary { color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 700; border-radius: 0.75rem; transition: all 0.2s; }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); border-color: var(--accent); }
</style>
@endpush

@section('content')
@can('view_customer_statement')

<div class="mb-8">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 bg-gradient-to-b from-orange-400 to-orange-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">Customer Statement</h1>
                <p class="text-secondary mt-1">Customer transaction & payment history</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="btn-ghost flex items-center gap-2">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="{{ route('reports.customer-statement.pdf', request()->query()) }}" class="btn-primary flex items-center gap-2">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
        </div>
    </div>
</div>

<div class="table-container rounded-2xl p-4 mb-8 fade-in">
    <form method="GET" class="space-y-4">
        <div class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs mb-1" style="color: var(--text-muted);">Customer <span class="text-red-500">*</span></label>
                <select name="customer_id" required class="input-modern w-full">
                    <option value="">Select Customer</option>
                    @foreach($customers as $cust)
                        <option value="{{ $cust->id }}" {{ $customerId == $cust->id ? 'selected' : '' }}>{{ $cust->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs mb-1" style="color: var(--text-muted);">From</label>
                <input type="date" name="date_from" value="{{ $dateFrom }}" class="input-modern">
            </div>
            <div>
                <label class="block text-xs mb-1" style="color: var(--text-muted);">To</label>
                <input type="date" name="date_to" value="{{ $dateTo }}" class="input-modern">
            </div>
            @include('reports.partials.branch-filter')
            <button type="submit" class="btn-primary">
                <i class="fas fa-search mr-1"></i> Generate Statement
            </button>
        </div>
    </form>
</div>

@if($customer)
<div class="table-container rounded-2xl p-5 mb-8 fade-in">
    <div class="flex items-center gap-4">
        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500/20 to-orange-600/20 flex items-center justify-center">
            <i class="fas fa-user text-orange-400 text-lg"></i>
        </div>
        <div>
            <h3 class="text-lg font-bold" style="color: var(--text-primary);">{{ $customer->name }}</h3>
            <div class="flex items-center gap-4 mt-1">
                @if($customer->phone)<span class="text-sm" style="color: var(--text-muted);"><i class="fas fa-phone mr-1"></i>{{ $customer->phone }}</span>@endif
                @if($customer->email)<span class="text-sm" style="color: var(--text-muted);"><i class="fas fa-envelope mr-1"></i>{{ $customer->email }}</span>@endif
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/20 flex items-center justify-center">
                <i class="fas fa-bookmark text-blue-400"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Opening Balance</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($openingBalance, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500/20 to-emerald-600/20 flex items-center justify-center">
                <i class="fas fa-cart-shopping text-emerald-400"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Sales Total</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($totalDebit, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-600/20 flex items-center justify-center">
                <i class="fas fa-credit-card text-purple-400"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Payments Total</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($totalPaid, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br {{ $closingBalance > 0 ? 'from-red-500/20 to-red-600/20' : 'from-emerald-500/20 to-emerald-600/20' }} flex items-center justify-center">
                <i class="fas {{ $closingBalance > 0 ? 'fa-exclamation-triangle text-red-400' : 'fa-check-circle text-emerald-400' }}"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Closing Balance</p>
        </div>
        <p class="text-2xl font-extrabold {{ $closingBalance > 0 ? 'text-red-400' : 'text-emerald-400' }}">
            ${{ number_format($closingBalance, 2) }}
        </p>
    </div>
</div>

<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="p-5" style="border-bottom: 1px solid var(--border-color);">
        <h3 class="text-lg font-bold" style="color: var(--text-primary);">Transaction History</h3>
        <p class="text-sm text-secondary mt-1">{{ displayDate(\Carbon\Carbon::parse($dateFrom)) }} — {{ displayDate(\Carbon\Carbon::parse($dateTo)) }}</p>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full">
            <thead class="table-header">
                <tr>
                    <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider">Date</th>
                    <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider">Invoice</th>
                    <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider">Type / Method</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold uppercase tracking-wider">Sale Amount</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold uppercase tracking-wider">Paid</th>
                    <th class="px-5 py-3.5 text-right text-xs font-semibold uppercase tracking-wider">Running Balance</th>
                </tr>
            </thead>
            <tbody class="divide-y" style="border-color: var(--border-color);">
                @php $runningBalance = $openingBalance; @endphp
                <tr style="background: var(--table-bg);">
                    <td class="px-5 py-3.5 text-sm" style="color: var(--text-secondary);" colspan="3"><strong>Opening Balance</strong></td>
                    <td class="px-5 py-3.5 text-sm text-right"></td>
                    <td class="px-5 py-3.5 text-sm text-right"></td>
                    <td class="px-5 py-3.5 text-sm text-right font-bold" style="color: var(--text-primary);">
                        ${{ number_format($runningBalance, 2) }}
                    </td>
                </tr>
                @forelse($transactions as $txn)
                    @php $runningBalance += $txn['debit']; $runningBalance -= $txn['paid']; @endphp
                    <tr class="table-row">
                        <td class="px-5 py-3.5 text-sm" style="color: var(--text-secondary);">{{ displayDate($txn['date']) }}</td>
                        <td class="px-5 py-3.5 text-sm font-medium text-orange-400">{{ $txn['ref'] }}</td>
                        @if($txn['type'] === 'sale')
                            <td class="px-5 py-3.5 text-sm">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-emerald-500/20 text-emerald-400 rounded-full">Sale</span>
                                @if(isset($txn['payment_method']) && $txn['payment_method'])
                                    <span class="ml-1 text-xs text-secondary">({{ $txn['payment_method'] }})</span>
                                @endif
                            </td>
                        @else
                            <td class="px-5 py-3.5 text-sm">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-blue-500/20 text-blue-400 rounded-full">Payment</span>
                                @if(isset($txn['payment_method']) && $txn['payment_method'])
                                    <span class="ml-1 text-xs text-secondary">({{ $txn['payment_method'] }})</span>
                                @endif
                            </td>
                        @endif
                        <td class="px-5 py-3.5 text-sm text-right font-medium text-red-400">
                            @if($txn['debit'] > 0)${{ number_format($txn['debit'], 2) }}@else - @endif
                        </td>
                        <td class="px-5 py-3.5 text-sm text-right font-medium text-emerald-400">
                            @if($txn['paid'] > 0)${{ number_format($txn['paid'], 2) }}@else - @endif
                        </td>
                        <td class="px-5 py-3.5 text-sm text-right font-bold" style="color: var(--text-primary);">
                            ${{ number_format($runningBalance, 2) }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-5 py-12 text-center">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 rounded-full flex items-center justify-center mb-3" style="background: var(--table-bg);">
                                    <i class="fas fa-receipt" style="color: var(--text-muted); font-size: 1.25rem;"></i>
                                </div>
                                <p class="font-medium" style="color: var(--text-muted);">No transactions for selected period</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
            @if(count($transactions) > 0)
                <tfoot style="background: var(--table-bg);">
                    <tr>
                        <td class="px-5 py-4 text-sm font-bold" style="color: var(--text-primary);" colspan="3">Closing Balance</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-red-400">${{ number_format($totalDebit, 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-emerald-400">${{ number_format($totalPaid, 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold {{ $closingBalance > 0 ? 'text-red-400' : 'text-emerald-400' }}">
                            ${{ number_format($closingBalance, 2) }}
                        </td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
</div>
@endif

@endcan
@endsection