@extends('admin_dashboard')
@section('admin')

<style>
    /* ── Stats ── */
    .stat-card { border-radius:14px; border:none; box-shadow:0 2px 12px rgba(0,0,0,.07); }
    .stat-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }

    /* ── Table ── */
    #loan-table { font-size:.8rem; }
    /* ── Laravel pagination styling ── */
    .pagination { gap:4px; margin:0; }
    .pagination .page-item .page-link {
        border-radius:8px !important; border:1.5px solid #e5e7eb;
        color:#374151; font-size:.82rem; padding:5px 11px; font-weight:500;
        transition:background .15s, color .15s;
    }
    .pagination .page-item.active .page-link {
        background:#dc3545; border-color:#dc3545; color:#fff;
    }
    .pagination .page-item.disabled .page-link { color:#d1d5db; }
    .pagination .page-item .page-link:hover:not(.active) { background:#fee2e2; color:#dc3545; }
    #loan-table thead th {
        font-size:.72rem; text-transform:uppercase; letter-spacing:.5px;
        white-space:nowrap; vertical-align:middle; padding:10px 10px;
        border-bottom: 2px solid rgba(255,255,255,.2);
    }
    #loan-table tbody td { vertical-align:middle; padding:8px 10px; white-space:nowrap; }
    #loan-table tbody tr:hover { background:#fef9f9; }

    /* ── Badges ── */
    .pill { padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:600; }
    .pill-red    { background:#fee2e2; color:#991b1b; }
    .pill-amber  { background:#fef3c7; color:#92400e; }
    .pill-green  { background:#d1fae5; color:#065f46; }
    .pill-blue   { background:#dbeafe; color:#1e40af; }
    .pill-purple { background:#ede9fe; color:#5b21b6; }

    /* ── Money cells ── */
    .money { font-family:monospace; font-weight:700; }
    .money-red    { color:#dc3545; }
    .money-green  { color:#198754; }
    .money-amber  { color:#b45309; }
    .money-muted  { color:#6b7280; }

    /* ── Progress bar ── */
    .mini-progress { height:5px; border-radius:3px; background:#f3f4f6; overflow:hidden; margin-top:3px; }
    .mini-progress-bar { height:5px; border-radius:3px; background:#16a34a; }

    .member-avatar { width:34px; height:34px; object-fit:cover; border-radius:50%; border:2px solid #e5e7eb; }
</style>

<div class="content">
<div class="container-fluid">

    {{-- ── Header ── --}}
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <h4 class="mb-0 fw-bold" style="color:#b91c1c;">
                <i class="bi bi-cash-coin me-2"></i>Loan Members
            </h4>
            <small class="text-muted">All loan accounts &amp; repayment status</small>
        </div>
        <a href="{{ route('loanmember.info.create') }}" class="btn btn-danger px-4 shadow-sm">
            <i class="bi bi-person-plus-fill me-1"></i> New Loan Member
        </a>
    </div>

    {{-- ── Search ── --}}
    <form method="GET" action="{{ route('loanmember.info.index') }}" class="mb-4">
        <div class="input-group" style="max-width:480px;">
            <span class="input-group-text bg-white" style="border:1.5px solid #e5e7eb; border-right:none;">
                <i class="bi bi-search text-danger"></i>
            </span>
            <input type="text" name="search" class="form-control ps-1"
                   placeholder="Search name, account no, mobile, loan type…"
                   value="{{ $search ?? '' }}" autocomplete="off"
                   style="border:1.5px solid #e5e7eb; border-left:none; border-right:none; border-radius:0;">
            @if(!empty($search))
            <a href="{{ route('loanmember.info.index') }}" class="btn btn-outline-secondary" title="Clear">
                <i class="bi bi-x-lg"></i>
            </a>
            @endif
            <button type="submit" class="btn btn-danger">Search</button>
        </div>
        @if(!empty($search))
        <small class="text-muted mt-1 d-block">
            {{ $members->total() }} result(s) for "<strong>{{ $search }}</strong>"
        </small>
        @endif
    </form>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm">
        <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    {{-- ── Stats ── --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background:#fee2e2; color:#b91c1c;"><i class="bi bi-people-fill"></i></div>
                    <div>
                        <div class="text-muted" style="font-size:.75rem;">Total Members</div>
                        <div class="fw-bold fs-5">{{ $members->total() }}</div>
                    </div>
                </div>
            </div>
        </div>
        @php
            $allStats = \App\Models\LoanMemberInfo::where('status', 0)->selectRaw('SUM(loan_amount) as total_loan, SUM(paid_amount) as total_paid, SUM(principal_due) as total_pdue, SUM(profit_due) as total_produe')->first();
        @endphp
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background:#fef3c7; color:#92400e;"><i class="bi bi-cash-stack"></i></div>
                    <div>
                        <div class="text-muted" style="font-size:.75rem;">Total Disbursed</div>
                        <div class="fw-bold fs-5">৳ {{ number_format($allStats->total_loan, 0) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background:#d1fae5; color:#065f46;"><i class="bi bi-check2-circle"></i></div>
                    <div>
                        <div class="text-muted" style="font-size:.75rem;">Total Collected</div>
                        <div class="fw-bold fs-5">৳ {{ number_format($allStats->total_paid, 0) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background:#ede9fe; color:#5b21b6;"><i class="bi bi-exclamation-circle-fill"></i></div>
                    <div>
                        <div class="text-muted" style="font-size:.75rem;">Total Due</div>
                        <div class="fw-bold fs-5" style="color:#b91c1c;">
                            ৳ {{ number_format($allStats->total_pdue + $allStats->total_produe, 0) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Table ── --}}
    <div class="card shadow-sm" style="border-radius:14px; border:none;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="loan-table" class="table table-hover align-middle mb-0 w-100">
                    <thead style="background: linear-gradient(135deg,#7f1d1d,#dc3545); color:#fff;">
                        <tr>
                            <th class="ps-3">#</th>
                            <th>GSS A/C No</th>
                            <th>Loan A/C No</th>
                            <th>Open Date</th>
                            <th>Group</th>
                            <th>Member</th>
                            <th>Mobile</th>
                            <th>Loan Type</th>
                            <th class="text-end">Loan Amt</th>
                            <th class="text-center">Pay Term</th>
                            <th class="text-end">Instalment</th>
                            <th class="text-end">Paid</th>
                            <th class="text-end">Principal Due</th>
                            <th class="text-end">Profit Due</th>
                            <th class="text-center">Terms Due</th>
                            <th class="text-end">Extra Charge</th>
                            <th class="text-center pe-3">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($members as $i => $member)
                        @php $rowNo = ($members->currentPage() - 1) * $members->perPage() + $i + 1; @endphp
                        @php
                            $total     = $member->total_amount_topay ?: 1;
                            $paid      = $member->paid_amount ?? 0;
                            $paidPct   = min(100, round($paid / $total * 100));
                        @endphp
                        <tr>
                            <td class="ps-3 text-muted">{{ $rowNo }}</td>

                            {{-- GSS account number --}}
                            <td>
                                <span class="pill pill-blue">{{ $member->account_number ?: '—' }}</span>
                            </td>

                            {{-- Loan account number --}}
                            <td>
                                <span class="money money-red">{{ $member->loan_ac_number ?: '—' }}</span>
                            </td>

                            {{-- Open Date --}}
                            <td class="text-muted">
                                <i class="bi bi-calendar2 me-1" style="font-size:.7rem;"></i>
                                {{ $member->opening_date ? \Carbon\Carbon::parse($member->opening_date)->format('d-m-Y') : '—' }}
                            </td>

                            {{-- Group --}}
                            <td>
                                @if($member->group)
                                    <span class="pill pill-red">{{ $member->group->group_name }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>

                            {{-- Member Name (from member_infos via account_no) --}}
                            @php
                                $mi      = $member->memberInfo;
                                $mName   = $mi->member_name    ?? $member->member_name;
                                $mFather = $mi->fat_hus_name   ?? $member->fat_hus_name;
                                $mAddr   = $mi->member_address ?? $member->member_address;
                                $mMobile = $mi->member_mobile  ?? $member->member_mobile;
                                $mPhoto  = $mi->photo          ?? $member->photo;
                            @endphp
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if($mPhoto)
                                        <img src="{{ asset($mPhoto) }}" class="member-avatar" alt="">
                                    @else
                                        <div class="member-avatar d-flex align-items-center justify-content-center bg-light text-muted" style="font-size:.75rem;">
                                            {{ strtoupper(substr($mName, 0, 1)) }}
                                        </div>
                                    @endif
                                    <div>
                                        <div class="fw-semibold" style="font-size:.82rem;">{{ $mName }}</div>
                                        <div class="text-muted" style="font-size:.72rem;">{{ $mFather }}</div>
                                        <div class="text-muted" style="font-size:.72rem;">{{ Str::limit($mAddr, 22) }}</div>
                                    </div>
                                </div>
                            </td>

                            {{-- Mobile --}}
                            <td>
                                @if($mMobile)
                                    <a href="tel:{{ $mMobile }}" class="text-decoration-none text-dark">
                                        <i class="bi bi-telephone-fill text-success me-1" style="font-size:.7rem;"></i>{{ $mMobile }}
                                    </a>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>

                            {{-- Loan Type --}}
                            <td>
                                @if($member->loan_type)
                                    <span class="pill pill-amber">{{ $member->loan_type }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>

                            {{-- Loan Amount --}}
                            <td class="text-end">
                                <span class="money money-red">৳ {{ number_format($member->loan_amount, 0) }}</span>
                            </td>

                            {{-- Pay Term --}}
                            <td class="text-center">
                                <span class="pill pill-purple">{{ $member->pay_term ?? '—' }}</span>
                            </td>

                            {{-- Instalment --}}
                            <td class="text-end">
                                <span class="money money-amber">৳ {{ number_format($member->installment, 2) }}</span>
                            </td>

                            {{-- Paid Amount with mini progress --}}
                            <td class="text-end" style="min-width:90px;">
                                <span class="money money-green">৳ {{ number_format($paid, 0) }}</span>
                                <div class="mini-progress">
                                    <div class="mini-progress-bar" style="width:{{ $paidPct }}%;"></div>
                                </div>
                                <span class="text-muted" style="font-size:.68rem;">{{ $paidPct }}%</span>
                            </td>

                            {{-- Principal Due --}}
                            <td class="text-end">
                                <span class="money {{ ($member->principal_due ?? 0) > 0 ? 'money-red' : 'money-muted' }}">
                                    ৳ {{ number_format($member->principal_due ?? 0, 0) }}
                                </span>
                            </td>

                            {{-- Profit Due --}}
                            <td class="text-end">
                                <span class="money {{ ($member->profit_due ?? 0) > 0 ? 'money-amber' : 'money-muted' }}">
                                    ৳ {{ number_format($member->profit_due ?? 0, 0) }}
                                </span>
                            </td>

                            {{-- Terms Due --}}
                            <td class="text-center">
                                @php $termDue = $member->term_due ?? 0; @endphp
                                <span class="pill {{ $termDue > 0 ? 'pill-red' : 'pill-green' }}">
                                    {{ $termDue > 0 ? $termDue . ' left' : 'Clear' }}
                                </span>
                            </td>

                            {{-- Extra Charge --}}
                            <td class="text-end">
                                <span class="money {{ ($member->extra_charge ?? 0) > 0 ? 'money-red' : 'money-muted' }}">
                                    ৳ {{ number_format($member->extra_charge ?? 0, 0) }}
                                </span>
                            </td>

                            {{-- Actions --}}
                            <td class="text-center text-nowrap pe-3">
                                <a href="{{ route('loanmember.info.edit', $member->id) }}"
                                   class="btn btn-sm btn-outline-primary px-2 me-1" title="Edit">
                                    <i class="bi bi-pencil-fill"></i>
                                </a>
                                <form action="{{ route('loanmember.info.delete', $member->id) }}"
                                      method="POST" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit"
                                            onclick="return confirm('Delete this loan member?')"
                                            class="btn btn-sm btn-outline-danger px-2" title="Delete">
                                        <i class="bi bi-trash-fill"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="17" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                No loan members yet.
                                <a href="{{ route('loanmember.info.create') }}">Add one now.</a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ── Pagination ── --}}
    @if($members->hasPages())
    <div class="d-flex align-items-center justify-content-between mt-3 px-1">
        <small class="text-muted">
            Showing {{ $members->firstItem() }}–{{ $members->lastItem() }} of {{ $members->total() }} entries
        </small>
        <div>
            {{ $members->links('pagination::bootstrap-5') }}
        </div>
    </div>
    @endif

</div>
</div>


@endsection