@extends('layouts.user')
@section('title', __('accounts_ledger.account_ledger'))

@section('content')
@php
    $labelMap = [
        'deposit'          => __('accounts_ledger.deposit'),
        'withdraw'         => __('accounts_ledger.withdraw'),
        'adjust_in'        => __('accounts_ledger.adjust_in'),
        'adjust_out'       => __('accounts_ledger.adjust_out'),
        'transfer_in'      => __('accounts_ledger.transfer_in'),
        'transfer_out'     => __('accounts_ledger.transfer_out'),
        'bank_charge'      => __('accounts_ledger.bank_charge'),
        'supplier_payment' => __('accounts_ledger.supplier_payment'),
        'customer_payment' => __('accounts_ledger.customer_payment'),
        'loan_in'          => __('accounts_ledger.loan_receive'),
        'loan_payment_out' => __('accounts_ledger.loan_payment'),
        'expense'          => __('accounts_ledger.expense'),
        'investment'       => __('accounts_ledger.investment'),
        'drawing'          => __('accounts_ledger.drawing'),
    ];

    $badgeClass = function($t){
        return match($t){
            'deposit','adjust_in','transfer_in','loan_in','customer_payment','investment' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
            'withdraw','adjust_out','transfer_out','bank_charge','loan_payment_out','supplier_payment','expense','drawing' => 'bg-rose-50 text-rose-700 border-rose-200',
            default => 'bg-slate-50 text-slate-700 border-slate-200',
        };
    };

    $prettyType = function($t) use ($labelMap){
        if(!$t) return '-';
        return $labelMap[$t] ?? \Illuminate\Support\Str::headline(str_replace('_',' ',$t));
    };

    $types = [
        'deposit','withdraw','adjust_in','adjust_out',
        'transfer_in','transfer_out','bank_charge',
        'supplier_payment','customer_payment',
        'loan_in','loan_payment_out',
        'expense','investment','drawing'
    ];

    $accountThemeClass = 'border-slate-200 bg-gradient-to-br from-slate-50 via-white to-slate-100/80';
    $accountOrb1 = 'bg-slate-200/50';
    $accountOrb2 = 'bg-slate-300/30';
    $accountWave = 'from-slate-200/40 via-slate-100/30 to-transparent';
    $accountLine = 'border-slate-300/40';
    $accountIconClass = 'bg-slate-500/10 text-slate-700';

    if (($account->type ?? null) === 'bank') {
        $accountThemeClass = 'border-blue-200 bg-gradient-to-br from-blue-50 via-white to-sky-100/80';
        $accountOrb1 = 'bg-blue-200/50';
        $accountOrb2 = 'bg-sky-200/40';
        $accountWave = 'from-blue-200/40 via-sky-100/30 to-transparent';
        $accountLine = 'border-blue-300/40';
        $accountIconClass = 'bg-blue-500/10 text-blue-700';
    } elseif (($account->type ?? null) === 'mfs') {
        $accountThemeClass = 'border-violet-200 bg-gradient-to-br from-violet-50 via-white to-purple-100/80';
        $accountOrb1 = 'bg-violet-200/50';
        $accountOrb2 = 'bg-purple-200/40';
        $accountWave = 'from-violet-200/40 via-purple-100/30 to-transparent';
        $accountLine = 'border-violet-300/40';
        $accountIconClass = 'bg-violet-500/10 text-violet-700';
    } elseif (($account->type ?? null) === 'cash') {
        $accountThemeClass = 'border-amber-200 bg-gradient-to-br from-amber-50 via-white to-orange-100/80';
        $accountOrb1 = 'bg-amber-200/50';
        $accountOrb2 = 'bg-orange-200/40';
        $accountWave = 'from-amber-200/40 via-orange-100/30 to-transparent';
        $accountLine = 'border-amber-300/40';
        $accountIconClass = 'bg-amber-500/10 text-amber-700';
    }
@endphp

<div class="space-y-4 text-xs">

    {{-- Header --}}
    <div class="relative overflow-hidden border p-4 shadow-sm {{ $accountThemeClass }}">
        <div class="pointer-events-none absolute inset-0">
            <div class="absolute -right-8 -top-8 h-24 w-24 rounded-full {{ $accountOrb1 }} blur-3xl"></div>
            <div class="absolute bottom-0 left-12 h-16 w-16 rounded-full {{ $accountOrb2 }} blur-2xl"></div>
            <div class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-r {{ $accountWave }}"></div>
            <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border {{ $accountLine }}"></div>
            <div class="absolute -bottom-10 left-1/2 h-16 w-[120%] -translate-x-1/2 rounded-[100%] border {{ $accountLine }}"></div>
        </div>

        <div class="relative z-10 flex flex-wrap items-start justify-between gap-3">
            <div class="min-w-0">
                <div class="text-[11px] text-slate-500">{{ __('accounts_ledger.account_ledger') }}</div>
                <div class="text-xl font-extrabold text-slate-900">{{ $account->name }}</div>
                <div class="mt-1 text-xs text-slate-500">
                    {{ strtoupper($account->type) }}
                    @if($account->account_number)
                        • {{ $account->account_number }}
                    @endif
                </div>
            </div>

            <div class="flex flex-wrap gap-2">
                <a href="{{ route('user.accounts.index') }}"
                   class="border bg-white/90 px-3 py-2 text-xs font-semibold backdrop-blur hover:bg-white">
                    {{ __('accounts_ledger.back') }}
                </a>

                <a href="{{ route('user.accounts.ledger.create', $account) }}"
                   class="bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800">
                    + {{ __('accounts_ledger.add_entry') }}
                </a>
            </div>
        </div>
    </div>

    {{-- Summary Cards --}}
    <div class="grid grid-cols-2 gap-2 xl:grid-cols-4">

        <div class="relative overflow-hidden border border-slate-200 bg-gradient-to-br from-slate-50 via-white to-slate-100/80 p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg">
            <div class="pointer-events-none absolute inset-0">
                <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full bg-slate-200/50 blur-2xl"></div>
                <div class="absolute bottom-0 left-8 h-14 w-14 rounded-full bg-slate-300/30 blur-2xl"></div>
                <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r from-slate-200/40 via-slate-100/30 to-transparent"></div>
                <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border border-slate-300/40"></div>
            </div>

            <div class="relative z-10">
                <div class="text-[10px] text-slate-500">{{ __('accounts_ledger.opening') }}</div>
                <div class="mt-1 text-lg font-extrabold">{{ number_format($opening, 2) }}</div>
            </div>
        </div>

        <div class="relative overflow-hidden border border-emerald-200 bg-gradient-to-br from-emerald-50 via-white to-lime-100/80 p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg">
            <div class="pointer-events-none absolute inset-0">
                <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full bg-emerald-200/50 blur-2xl"></div>
                <div class="absolute bottom-0 left-8 h-14 w-14 rounded-full bg-lime-200/40 blur-2xl"></div>
                <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r from-emerald-200/40 via-lime-100/30 to-transparent"></div>
                <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border border-emerald-300/40"></div>
            </div>

            <div class="relative z-10">
                <div class="text-[10px] text-slate-500">{{ __('accounts_ledger.total_debit') }}</div>
                <div class="mt-1 text-lg font-extrabold text-emerald-700">{{ number_format($sumDebit, 2) }}</div>
            </div>
        </div>

        <div class="relative overflow-hidden border border-rose-200 bg-gradient-to-br from-rose-50 via-white to-pink-100/80 p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg">
            <div class="pointer-events-none absolute inset-0">
                <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full bg-rose-200/50 blur-2xl"></div>
                <div class="absolute bottom-0 left-8 h-14 w-14 rounded-full bg-pink-200/40 blur-2xl"></div>
                <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r from-rose-200/40 via-pink-100/30 to-transparent"></div>
                <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border border-rose-300/40"></div>
            </div>

            <div class="relative z-10">
                <div class="text-[10px] text-slate-500">{{ __('accounts_ledger.total_credit') }}</div>
                <div class="mt-1 text-lg font-extrabold text-rose-700">{{ number_format($sumCredit, 2) }}</div>
            </div>
        </div>

        <div class="relative overflow-hidden border p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg {{ $balance >= 0 ? 'border-emerald-200 bg-gradient-to-br from-emerald-50 via-white to-lime-100/80' : 'border-rose-200 bg-gradient-to-br from-rose-50 via-white to-pink-100/80' }}">
            <div class="pointer-events-none absolute inset-0">
                <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full {{ $balance >= 0 ? 'bg-emerald-200/50' : 'bg-rose-200/50' }} blur-2xl"></div>
                <div class="absolute bottom-0 right-8 h-14 w-14 rounded-full {{ $balance >= 0 ? 'bg-lime-200/40' : 'bg-pink-200/40' }} blur-2xl"></div>
                <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r {{ $balance >= 0 ? 'from-emerald-200/40 via-lime-100/30 to-transparent' : 'from-rose-200/40 via-pink-100/30 to-transparent' }}"></div>
                <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border {{ $balance >= 0 ? 'border-emerald-300/40' : 'border-rose-300/40' }}"></div>
            </div>

            <div class="relative z-10">
                <div class="text-[10px] {{ $balance >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">{{ __('accounts_ledger.balance') }}</div>
                <div class="mt-1 text-lg font-extrabold {{ $balance >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">
                    {{ number_format($balance, 2) }}
                </div>
            </div>
        </div>
    </div>

    {{-- Filter --}}
    <div class="relative overflow-hidden border bg-white p-4 shadow-sm">
        <div class="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-r from-slate-100/50 via-white to-slate-100/50"></div>

        <form class="relative z-10 grid grid-cols-1 gap-2 text-xs md:grid-cols-8" method="GET">
            <select class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none" name="type">
                <option value="">{{ __('accounts_ledger.all_types') }}</option>
                @foreach($types as $t)
                    <option value="{{ $t }}" @selected(request('type') === $t)>{{ $prettyType($t) }}</option>
                @endforeach
            </select>

            <input type="date" class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none" name="date" value="{{ request('date') }}">
            <input type="number" min="1" max="12" class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none" name="month" value="{{ request('month') }}" placeholder="{{ __('accounts_ledger.month') }}">
            <input type="number" min="2000" max="2100" class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none" name="year" value="{{ request('year') }}" placeholder="{{ __('accounts_ledger.year') }}">

            <input class="border border-slate-200 px-3 py-2 md:col-span-2 focus:border-slate-400 focus:outline-none"
                   name="search"
                   value="{{ request('search') }}"
                   placeholder="{{ __('accounts_ledger.search_trx_no_note') }}">

            <button class="bg-slate-900 px-3 py-2 font-semibold text-white hover:bg-slate-800">
                {{ __('accounts_ledger.filter') }}
            </button>

            <a class="border border-slate-200 bg-white px-3 py-2 text-center font-semibold hover:bg-slate-50"
               href="{{ route('user.accounts.ledger.index', $account) }}">
                {{ __('accounts_ledger.reset') }}
            </a>
        </form>
    </div>

    {{-- Table --}}
    <div class="border bg-white p-4 shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead>
                    <tr class="border-b text-left text-slate-500">
                        <th class="py-2.5">{{ __('accounts_ledger.date') }}</th>
                        <th>{{ __('accounts_ledger.type') }}</th>
                        <th>{{ __('accounts_ledger.trx_no') }}</th>
                        <th>{{ __('accounts_ledger.debit') }}</th>
                        <th>{{ __('accounts_ledger.credit') }}</th>
                        <th>{{ __('accounts_ledger.note') }}</th>
                        <th class="text-right">{{ __('accounts_ledger.action') }}</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($ledgers as $l)
                        @php
                            $t = $l->type ?? null;
                            $isAuto = !empty($l->reference_type) && !empty($l->reference_id);
                        @endphp

                        <tr class="border-b last:border-0">
                            <td class="py-3">
                                <div class="font-semibold">{{ optional($l->posted_at)->format('d M Y') ?? optional($l->created_at)->format('d M Y') }}</div>
                                <div class="mt-1 text-[10px] text-slate-500">{{ optional($l->posted_at)->format('h:i A') ?? optional($l->created_at)->format('h:i A') }}</div>
                            </td>

                            <td>
                                <span class="rounded-full border px-2 py-0.5 text-[10px] font-semibold {{ $badgeClass($t) }}">
                                    {{ $prettyType($t) }}
                                </span>

                                @if($isAuto)
                                    <div class="mt-1 text-[10px] text-slate-500">{{ __('accounts_ledger.auto') }}</div>
                                @endif
                            </td>

                            <td class="font-mono text-[11px] text-slate-700">
                                {{ $l->trx_no }}
                            </td>

                            <td class="font-semibold {{ $l->debit > 0 ? 'text-emerald-700' : 'text-slate-500' }}">
                                {{ number_format((float)$l->debit, 2) }}
                            </td>

                            <td class="font-semibold {{ $l->credit > 0 ? 'text-rose-700' : 'text-slate-500' }}">
                                {{ number_format((float)$l->credit, 2) }}
                            </td>

                            <td class="max-w-[300px] text-slate-600">
                                {{ $l->description ?? '-' }}
                            </td>

                            <td class="whitespace-nowrap text-right">
                                <form class="inline js-delete" method="POST" action="{{ route('user.accounts.ledger.destroy', [$account, $l]) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button class="border border-rose-200 bg-rose-50 px-2.5 py-1 text-[11px] font-semibold text-rose-700 hover:bg-rose-100">
                                        {{ __('accounts_ledger.delete') }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-slate-500">
                                {{ __('accounts_ledger.no_ledger_entries_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $ledgers->links() }}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('form.js-delete').forEach(f => {
        f.addEventListener('submit', (e) => {
            e.preventDefault();
            if (typeof Swal === 'undefined') {
                f.submit();
                return;
            }

            Swal.fire({
                title: @json(__('accounts_ledger.delete_ledger_entry_confirm_title')),
                text: @json(__('accounts_ledger.delete_ledger_entry_warning')),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: @json(__('accounts_ledger.yes_delete')),
                cancelButtonText: @json(__('accounts_ledger.cancel'))
            }).then((r) => {
                if (r.isConfirmed) f.submit();
            });
        });
    });
});
</script>
@endsection