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

<style>
    .mss-table thead th {
        font-size: .75rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .5px; white-space: nowrap;
        padding: 13px 14px; border: none; color: rgba(255,255,255,.9);
    }
    .mss-table tbody td { font-size: .875rem; vertical-align: middle; padding: 11px 14px; }
    .mss-table tbody tr { border-bottom: 1px solid #f3f4f6; transition: background .12s; }
    .mss-table tbody tr:hover { background: #f0fdf4; }

    .acc-chip {
        font-family: 'Courier New', monospace; font-weight: 700;
        color: #0f4c35; font-size: .85rem;
        background: #d1fae5; padding: 3px 10px; border-radius: 6px;
        display: inline-block;
    }
    .amt-col { font-family: monospace; font-weight: 700; }
    .stat-card { border-radius: 14px; border: none; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: transform .2s; }
    .stat-card:hover { transform: translateY(-3px); }
    .act-btn { width: 32px; height: 32px; border-radius: 8px; padding: 0;
               display: inline-flex; align-items: center; justify-content: center;
               font-size: .82rem; border: 1.5px solid; transition: all .15s; }
    .act-btn:hover { transform: translateY(-1px); }
</style>

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

    {{-- ── Page Header ── --}}
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4"
         style="background: linear-gradient(135deg,#0f4c35,#1a7a5e); border-radius: 14px; padding: 18px 24px;">
        <div class="d-flex align-items-center gap-3">
            <div style="background:rgba(255,255,255,.15); border-radius:10px; width:46px; height:46px;
                        display:flex; align-items:center; justify-content:center;">
                <i class="bi bi-piggy-bank-fill" style="color:#fff; font-size:1.25rem;"></i>
            </div>
            <div>
                <h5 class="mb-0 text-white fw-bold">DMS Account Holders</h5>
                <small style="color:rgba(255,255,255,.7);">Monthly Savings Scheme — all active accounts</small>
            </div>
        </div>
        <a href="{{ route('account.index') }}"
           style="background:#fff; color:#0f4c35; border-radius:8px; padding:8px 20px;
                  font-weight:700; text-decoration:none; font-size:.85rem;">
            <i class="bi bi-plus-lg me-1"></i>Add New Account
        </a>
    </div>

    {{-- ── Success alert ── --}}
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show mb-3" role="alert"
         style="border-radius:10px; border:none; background:#d1fae5; color:#065f46;">
        <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 Row ── --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3 text-center">
                <div style="font-size:1.7rem; font-weight:800; color:#0f4c35; line-height:1;">
                    {{ $members->count() }}
                </div>
                <div class="text-muted mt-1" style="font-size:.78rem;">Total Members</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3 text-center">
                <div style="font-size:1.7rem; font-weight:800; color:#1a7a5e; line-height:1;">
                    ৳ {{ number_format($members->sum('balance'), 0) }}
                </div>
                <div class="text-muted mt-1" style="font-size:.78rem;">Total Balance</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3 text-center">
                <div style="font-size:1.7rem; font-weight:800; color:#1d4ed8; line-height:1;">
                    ৳ {{ number_format($members->sum('deposit_amount'), 0) }}
                </div>
                <div class="text-muted mt-1" style="font-size:.78rem;">Total Installment</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3 text-center">
                <div style="font-size:1.7rem; font-weight:800; color:#9d174d; line-height:1;">
                    {{ $members->whereNotNull('member_mobile')->count() }}
                </div>
                <div class="text-muted mt-1" style="font-size:.78rem;">With Mobile</div>
            </div>
        </div>
    </div>

    {{-- ── Table Card ── --}}
    <div class="card" style="border-radius:14px; border:none; box-shadow:0 2px 12px rgba(0,0,0,.06); overflow:hidden;">
        <div class="table-responsive">
            <table id="basic-datatable" class="table table-hover mss-table mb-0 w-100">
                <thead style="background: linear-gradient(135deg,#0f4c35,#1a7a5e);">
                    <tr>
                        <th class="ps-4">#</th>
                        <th>Account No</th>
                        <th>Open Date</th>
                        <th>Member Name</th>
                        <th>Father / Husband</th>
                        <th>Address</th>
                        <th>Mobile</th>
                        <th class="text-end">Installment</th>
                        <th class="text-end">Balance</th>
                        <th class="text-center pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($members as $i => $member)
                    <tr>
                        <td class="ps-4 text-muted small">{{ $i + 1 }}</td>
                        <td>
                            <span class="acc-chip">{{ $member->account_number }}</span>
                        </td>
                        <td class="text-muted small text-nowrap">
                            <i class="bi bi-calendar2 me-1"></i>
                            {{ \Carbon\Carbon::parse($member->opening_date)->format('d M Y') }}
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div style="width:32px; height:32px; border-radius:50%; flex-shrink:0;
                                            background:linear-gradient(135deg,#0f4c35,#22a67e);
                                            color:#fff; display:flex; align-items:center; justify-content:center;
                                            font-weight:700; font-size:.8rem;">
                                    {{ strtoupper(substr($member->member_name, 0, 1)) }}
                                </div>
                                <span class="fw-semibold" style="color:#111827;">{{ $member->member_name }}</span>
                            </div>
                        </td>
                        <td class="text-muted small">{{ $member->fat_hus_name ?? '—' }}</td>
                        <td class="text-muted small" style="max-width:140px;">
                            <span title="{{ $member->member_address }}">
                                {{ Str::limit($member->member_address, 28) }}
                            </span>
                        </td>
                        <td class="small">
                            @if($member->member_mobile)
                            <a href="tel:{{ $member->member_mobile }}" class="text-decoration-none" style="color:#1a7a5e;">
                                <i class="bi bi-telephone me-1" style="font-size:.75rem;"></i>{{ $member->member_mobile }}
                            </a>
                            @else
                            <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <span class="amt-col" style="color:#1d4ed8;">
                                ৳ {{ number_format($member->deposit_amount ?? 0, 2) }}
                            </span>
                        </td>
                        <td class="text-end">
                            <span class="amt-col" style="color:#0f4c35;">
                                ৳ {{ number_format($member->balance ?? 0, 2) }}
                            </span>
                        </td>
                        <td class="text-center pe-4">
                            <a href="{{ route('othermember.info.edit', $member->id) }}"
                               class="act-btn btn-outline-info text-info me-1" title="Edit">
                                <i class="bi bi-pencil-fill"></i>
                            </a>
                            <form action="{{ route('member.info.delete', $member->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" onclick="return confirm('Delete this account? This cannot be undone.')"
                                        class="act-btn btn-outline-danger text-danger" title="Delete">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-2 d-block mb-2 opacity-25"></i>
                            No DMS account holders found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
</div>

@endsection