@extends('frontend.layout_2')

@section('title', 'কিস্তি জমা দিন')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
    :root {
        --ink: #0f172a;
        --muted: #6b7280;
        --ring: #e2e8f0;
        --card: #ffffff;
        --brand: #DD3532;
        --brand-dark: #c92f2c;
        --teal: #10b981;
        --indigo: #6366f1;
        --cyan: #06b6d4;
        --danger: #ef4444;
        --ok: #059669;
    }

    @media (prefers-reduced-motion: no-preference) {
        .press:active {
            transform: translateY(1px);
        }
    }

    .bg-wrap {
        position: relative;
        isolation: isolate;
        min-height: 100vh;
    }

    .bg-wrap::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        background:
            radial-gradient(1200px 600px at -10% -10%, #fecaca55 10%, transparent 60%),
            radial-gradient(1000px 600px at 110% 10%, #fee2e255 10%, transparent 60%),
            linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .page-card {
        border-radius: 18px;
        background: var(--card);
        box-shadow: 0 12px 30px rgba(2, 8, 23, .06);
        border: 1px solid rgba(2, 8, 23, .05);
    }

    .header-stat {
        display: flex;
        align-items: center;
        gap: .7rem;
        border: 1px solid var(--ring);
        background: #fff;
        border-radius: 14px;
        padding: .85rem .95rem;
    }

    .icon-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #fff;
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
    }

    .text-dim {
        color: var(--muted);
    }

    .amount {
        font-weight: 800;
        color: var(--ok);
    }

    .tab {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        border-radius: 999px;
        padding: .5rem .85rem;
        font-weight: 700;
        font-size: .86rem;
        border: 1px solid var(--ring);
        background: #fff;
        color: var(--ink);
    }

    .tab.active {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(90deg, var(--brand), var(--brand-dark));
        box-shadow: 0 6px 16px rgba(221, 53, 50, .25);
    }

    .item {
        display: flex;
        align-items: flex-start;
        gap: .85rem;
        border: 1px solid var(--ring);
        border-radius: 14px;
        padding: .95rem;
        background: #fff;
        transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    }

    .item:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(2, 8, 23, .06);
    }

    .item + .item {
        margin-top: .8rem;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        border-radius: 999px;
        padding: .22rem .6rem;
        font-weight: 700;
        font-size: 11px;
        line-height: 1;
        border: 1px solid transparent;
    }

    .badge-upcoming {
        background: #eef2ff;
        color: #3730a3;
        border-color: #c7d2fe;
    }

    .badge-submitted {
        background: #fff7ed;
        color: #9a3412;
        border-color: #fed7aa;
    }

    .badge-late {
        background: #fef2f2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .badge-paid {
        background: #ecfdf5;
        color: #065f46;
        border-color: #a7f3d0;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 999px;
        padding: .7rem 1rem;
        font-weight: 800;
        font-size: .9rem;
        color: #fff;
        background: linear-gradient(90deg, var(--brand), var(--brand-dark));
        box-shadow: 0 10px 22px rgba(221, 53, 50, .22);
        white-space: nowrap;
    }

    .btn-ghost {
        border-radius: 999px;
        border: 1px solid var(--ring);
        background: #fff;
        color: var(--ink);
        padding: .6rem .95rem;
        font-weight: 700;
    }

    .empty {
        border: 1px dashed var(--ring);
        border-radius: 16px;
        background: #f8fafc;
    }

    @media (max-width: 480px) {
        .header-stat {
            padding: .75rem .8rem;
        }

        .item {
            padding: .85rem;
        }

        .tab {
            padding: .45rem .75rem;
            font-size: .82rem;
        }
    }
</style>
@endpush

@section('sub_layout')
@php
    $all = $installments->values();

    $normalized = $all->map(function ($item) {
        $status = $item->status;

        if ($status === 'pending') {
            $status = 'upcoming';
        }

        if (
            in_array($status, ['pending', 'upcoming'], true)
            && $item->due_date
            && $item->due_date->isPast()
        ) {
            $status = 'late';
        }

        $item->display_status = $status;

        return $item;
    });

    $paid = $normalized->where('display_status', 'paid')->values();
    $submitted = $normalized->where('display_status', 'submitted')->values();
    $upcoming = $normalized->where('display_status', 'upcoming')->values();
    $late = $normalized->where('display_status', 'late')->values();

    $nextDue = $normalized
        ->filter(fn ($i) => !in_array($i->display_status, ['paid', 'submitted'], true) && $i->due_date)
        ->sortBy('due_date')
        ->first();

    $totalDue = $upcoming->sum('amount') + $late->sum('amount');

    $initialTab = in_array(request('tab'), ['upcoming', 'submitted', 'late', 'paid', 'all'], true)
        ? request('tab')
        : 'all';
@endphp

<div class="bg-wrap" style="margin-bottom: 100px;">
    <div class="mx-auto max-w-3xl px-4 py-6">
        <div class="page-card p-5">

            @if(session('success'))
                <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-3 text-sm text-emerald-800">
                    <i class="fa-solid fa-circle-check"></i>
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-800">
                    <i class="fa-solid fa-circle-xmark"></i>
                    {{ session('error') }}
                </div>
            @endif

            <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                <div class="header-stat">
                    <span class="icon-pill" style="background: var(--brand);">
                        <i class="fa-solid fa-sack-dollar"></i>
                    </span>

                    <div>
                        <div class="text-xs text-dim">মোট বকেয়া</div>
                        <div class="text-[15px] font-extrabold" style="color: var(--ink);">
                            ৳ {{ number_format($totalDue) }}
                        </div>
                    </div>
                </div>

                <div class="header-stat">
                    <span class="icon-pill" style="background: var(--cyan);">
                        <i class="fa-regular fa-clock"></i>
                    </span>

                    <div>
                        <div class="text-xs text-dim">আগামী কিস্তি</div>
                        <div class="text-[15px] font-extrabold" style="color: var(--ink);">
                            {{ $nextDue && $nextDue->due_date ? $nextDue->due_date->format('d M Y') : '—' }}
                        </div>
                    </div>
                </div>

                <div class="header-stat">
                    <span class="icon-pill" style="background: var(--indigo);">
                        <i class="fa-solid fa-list-check"></i>
                    </span>

                    <div>
                        <div class="text-xs text-dim">মোট কিস্তি</div>
                        <div class="text-[15px] font-extrabold" style="color: var(--ink);">
                            {{ $all->count() }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4 flex flex-wrap items-center gap-2">
                <button type="button" class="tab press" data-filter="all">
                    <i class="fa-solid fa-bars"></i>
                    সব
                </button>

                <button type="button" class="tab press" data-filter="upcoming">
                    <i class="fa-regular fa-bell"></i>
                    Upcoming ({{ $upcoming->count() }})
                </button>

                <button type="button" class="tab press" data-filter="submitted">
                    <i class="fa-solid fa-paper-plane"></i>
                    Submitted ({{ $submitted->count() }})
                </button>

                <button type="button" class="tab press" data-filter="late">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    Late ({{ $late->count() }})
                </button>

                <button type="button" class="tab press" data-filter="paid">
                    <i class="fa-solid fa-circle-check"></i>
                    Paid ({{ $paid->count() }})
                </button>

                <a href="{{ route('transactions') }}" class="ml-auto btn-ghost press">
                    <i class="fa-regular fa-rectangle-list"></i>
                    Transactions
                </a>
            </div>

            <h3 class="mt-4 mb-2 text-lg font-extrabold" style="color: var(--ink);">
                আপনার কিস্তিসমূহ
            </h3>

            @if($all->isEmpty())
                <div class="empty p-8 text-center">
                    <div class="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-500">
                        <i class="fa-regular fa-face-smile"></i>
                    </div>

                    <div class="text-base font-semibold" style="color: var(--ink);">
                        কোনো কিস্তি পাওয়া যায়নি
                    </div>

                    <div class="mt-1 text-sm text-dim">
                        আপনার loan installment এখনো create হয়নি অথবা loan এখনো active নয়।
                    </div>
                </div>
            @else
                <div id="listWrap" class="mt-2">
                    @foreach($normalized as $ins)
                        @php
                            $status = $ins->display_status;

                            $isPaid = $status === 'paid';
                            $isSubmitted = $status === 'submitted';
                            $isLate = $status === 'late';

                            $badgeCls = $isPaid
                                ? 'badge-paid'
                                : ($isSubmitted ? 'badge-submitted' : ($isLate ? 'badge-late' : 'badge-upcoming'));

                            $badgeTxt = $isPaid
                                ? 'Paid'
                                : ($isSubmitted ? 'Submitted' : ($isLate ? 'Late' : 'Upcoming'));

                            $chipBg = $isPaid
                                ? 'var(--teal)'
                                : ($isSubmitted ? '#f59e0b' : ($isLate ? 'var(--danger)' : 'var(--indigo)'));
                        @endphp

                        <div class="item" data-status="{{ $status }}">
                            <span class="icon-pill" style="background: {{ $chipBg }};">
                                <i class="fa-solid fa-calendar-check"></i>
                            </span>

                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <div class="text-[15px] font-extrabold" style="color: var(--ink);">
                                        Loan #{{ $ins->loan?->id ?? 'N/A' }}
                                        —
                                        কিস্তি
                                        <span class="amount">
                                            ৳ {{ number_format((float) $ins->amount) }}
                                        </span>
                                    </div>

                                    <span class="badge {{ $badgeCls }}">
                                        {{ $badgeTxt }}
                                    </span>
                                </div>

                                <div class="mt-1 text-xs text-dim">
                                    Due: {{ $ins->due_date ? $ins->due_date->format('d M Y') : '—' }}
                                    • Principal: ৳ {{ number_format((float) ($ins->principal_part ?? 0)) }}
                                    • Interest: ৳ {{ number_format((float) ($ins->interest_part ?? 0)) }}
                                </div>

                                @if($isSubmitted)
                                    <div class="mt-1 text-xs text-amber-700">
                                        <i class="fa-solid fa-hourglass-half"></i>
                                        Submitted — Admin approval pending.
                                    </div>
                                @endif

                                @if($isPaid && $ins->paid_at)
                                    <div class="mt-1 text-xs" style="color: var(--ok);">
                                        <i class="fa-solid fa-check-double"></i>
                                        Paid at: {{ $ins->paid_at->format('d M Y, h:i A') }}
                                    </div>
                                @endif
                            </div>

                            <div class="shrink-0">
                                @if(!$isPaid && !$isSubmitted)
                                    <a href="{{ route('loan.installments.pay.form', $ins) }}" class="btn press">
                                        <i class="fa-solid fa-paper-plane"></i>
                                        Pay
                                    </a>
                                @elseif($isSubmitted)
                                    <span class="text-xs font-semibold text-amber-700">
                                        <i class="fa-solid fa-hourglass-start"></i>
                                        Waiting
                                    </span>
                                @else
                                    <span class="text-xs font-semibold" style="color: var(--ok);">
                                        <i class="fa-solid fa-circle-check"></i>
                                        Done
                                    </span>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const initial = @json($initialTab);
    const tabs = document.querySelectorAll('.tab');
    const items = document.querySelectorAll('#listWrap [data-status]');

    function setActive(btn) {
        tabs.forEach(t => t.classList.remove('active'));
        btn.classList.add('active');
    }

    function applyFilter(key) {
        if (!items.length) return;

        items.forEach(el => {
            if (key === 'all') {
                el.style.display = 'flex';
                return;
            }

            el.style.display = el.dataset.status === key ? 'flex' : 'none';
        });
    }

    tabs.forEach(btn => {
        btn.addEventListener('click', () => {
            const filter = btn.getAttribute('data-filter');

            setActive(btn);
            applyFilter(filter);

            const url = new URL(window.location);
            url.searchParams.set('tab', filter);
            window.history.replaceState({}, '', url);
        });
    });

    const toClick = Array.from(tabs).find(t => t.getAttribute('data-filter') === initial) || tabs[0];

    if (toClick) {
        toClick.click();
    } else {
        applyFilter('all');
        tabs[0]?.classList.add('active');
    }
})();
</script>
@endpush