@extends('admin_dashboard')
@section('admin')
<div class="content">
    <div class="container-fluid">

        {{-- Page Header --}}
        <div class="row mb-3">
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2"
                     style="background: linear-gradient(135deg, #1a3a5c, #0f2540); border-radius: 12px; padding: 18px 24px;">
                    <div class="d-flex align-items-center gap-3">
                        <div style="background: rgba(255,255,255,0.15); border-radius: 10px; width:46px; height:46px; display:flex; align-items:center; justify-content:center;">
                            <i class="fa fa-users" style="color:#fff; font-size:20px;"></i>
                        </div>
                        <div>
                            <h4 class="mb-0 text-white fw-bold">GSS Account Holders</h4>
                            <small style="color:rgba(255,255,255,0.65);">Manage all member accounts</small>
                        </div>
                    </div>
                    <a href="{{ route('member.info.create') }}"
                       style="background:#fff; color:#1a3a5c; border-radius:8px; padding:8px 20px; font-weight:600; text-decoration:none; font-size:14px;">
                        <i class="fa fa-plus me-1"></i> Add New Member
                    </a>
                </div>
            </div>
        </div>

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

        {{-- Summary Cards --}}
        <div class="row mb-3 g-3">
            <div class="col-md-3 col-6">
                <div class="card border-0 shadow-sm text-center py-3">
                    <div class="card-body p-2">
                        <div style="font-size:28px; font-weight:700; color:#1a3a5c;">{{ $members->count() }}</div>
                        <div class="text-muted" style="font-size:13px;">Total Members</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card border-0 shadow-sm text-center py-3">
                    <div class="card-body p-2">
                        <div style="font-size:28px; font-weight:700; color:#198754;">
                            {{ number_format($members->sum('balance'), 2) }}
                        </div>
                        <div class="text-muted" style="font-size:13px;">Total Balance</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card border-0 shadow-sm text-center py-3">
                    <div class="card-body p-2">
                        <div style="font-size:28px; font-weight:700; color:#0d6efd;">
                            {{ $members->whereNotNull('nominee')->count() }}
                        </div>
                        <div class="text-muted" style="font-size:13px;">With Nominee</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card border-0 shadow-sm text-center py-3">
                    <div class="card-body p-2">
                        <div style="font-size:28px; font-weight:700; color:#fd7e14;">
                            {{ $members->where('balance', '>', 0)->count() }}
                        </div>
                        <div class="text-muted" style="font-size:13px;">Active Accounts</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Members Table --}}
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom d-flex align-items-center justify-content-between py-3">
                        <h6 class="mb-0 fw-semibold" style="color:#1a3a5c;">
                            <i class="fa fa-list me-2"></i>Member List
                        </h6>
                        <span class="badge" style="background:#1a3a5c; font-size:12px;">
                            {{ $members->count() }} records
                        </span>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table id="basic-datatable" class="table table-hover mb-0 w-100">
                                <thead>
                                    <tr style="background: linear-gradient(135deg, #1a3a5c, #0f2540);">
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">#</th>
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">Account No</th>
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">Open Date</th>
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">Group Name</th>
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">Member</th>
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">Father / Husband</th>
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">Address</th>
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">Mobile</th>
                                        <th class="text-white border-0 py-3" style="font-size:12px; font-weight:600;">Nominee</th>
                                        <th class="text-white border-0 py-3 text-end" style="font-size:12px; font-weight:600;">Balance</th>
                                        <th class="text-white border-0 py-3 text-center" style="font-size:12px; font-weight:600;">Photo</th>
                                        <th class="text-white border-0 py-3 text-center" style="font-size:12px; font-weight:600;">Signature</th>
                                        <th class="text-white border-0 py-3 text-center" style="font-size:12px; font-weight:600;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($members as $i => $member)
                                    <tr style="border-bottom: 1px solid #f0f0f0; transition: background .15s;">
                                        <td class="py-3 text-muted" style="font-size:13px;">{{ $i + 1 }}</td>
                                        <td class="py-3">
                                            <span style="background:#e8f0fe; color:#1a3a5c; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600;">
                                                {{ $member->account_number }}
                                            </span>
                                        </td>
                                        <td class="py-3" style="font-size:13px; color:#555;">
                                            <i class="fa fa-calendar-alt me-1 text-muted" style="font-size:11px;"></i>
                                            {{ \Carbon\Carbon::parse($member->opening_date)->format('d M Y') }}
                                        </td>
                                        <td class="py-3">
                                            <span style="background:#e8f5ee; color:#1a7a5e; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600;">
                                                {{ $member->group->group_name ?? '—' }}
                                            </span>
                                        </td>
                                        <td class="py-3">
                                            <div class="d-flex align-items-center gap-2">
                                                <div style="width:34px; height:34px; border-radius:50%; overflow:hidden; border:2px solid #e0e0e0; flex-shrink:0;">
                                                    <img src="{{ asset($member->photo) }}" style="width:100%; height:100%; object-fit:cover;"
                                                         onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode($member->member_name) }}&size=34&background=1a3a5c&color=fff'">
                                                </div>
                                                <span style="font-size:13px; font-weight:600; color:#222;">{{ $member->member_name }}</span>
                                            </div>
                                        </td>
                                        <td class="py-3" style="font-size:13px; color:#555;">{{ $member->fat_hus_name }}</td>
                                        <td class="py-3" style="font-size:13px; color:#555; max-width:150px;">
                                            <span title="{{ $member->member_address }}">
                                                {{ Str::limit($member->member_address, 30) }}
                                            </span>
                                        </td>
                                        <td class="py-3">
                                            <a href="tel:{{ $member->member_mobile }}" style="color:#1a3a5c; font-size:13px; text-decoration:none;">
                                                <i class="fa fa-phone me-1" style="font-size:11px;"></i>{{ $member->member_mobile }}
                                            </a>
                                        </td>
                                        <td class="py-3" style="font-size:13px;">
                                            @if($member->nominee)
                                                <span style="color:#198754;">
                                                    <i class="fa fa-user-check me-1" style="font-size:11px;"></i>
                                                    {{ $member->nominee->nominee_name }}
                                                </span>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td class="py-3 text-end">
                                            <span style="font-size:13px; font-weight:700; color:{{ ($member->balance ?? 0) > 0 ? '#198754' : '#aaa' }};">
                                                {{ number_format($member->balance ?? 0, 2) }}
                                            </span>
                                        </td>
                                        <td class="py-3 text-center">
                                            <a href="{{ asset($member->photo) }}" target="_blank">
                                                <img src="{{ asset($member->photo) }}" style="width:38px; height:38px; object-fit:cover; border-radius:6px; border:1px solid #ddd;"
                                                     onerror="this.style.display='none'">
                                            </a>
                                        </td>
                                        <td class="py-3 text-center">
                                            <a href="{{ asset($member->signature) }}" target="_blank">
                                                <img src="{{ asset($member->signature) }}" style="width:60px; height:28px; object-fit:contain; border-radius:4px; border:1px solid #ddd; background:#f9f9f9; padding:2px;"
                                                     onerror="this.style.display='none'">
                                            </a>
                                        </td>
                                        <td class="py-3 text-center">
                                            <a href="{{ route('member.info.edit', $member->id) }}"
                                               class="btn btn-sm me-1"
                                               style="background:#e8f0fe; color:#1a3a5c; border:none; border-radius:6px; padding:5px 12px; font-size:12px; font-weight:600;">
                                                <i class="fa fa-edit me-1"></i>Edit
                                            </a>
                                            <form action="{{ route('member.info.delete', $member->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button onclick="return confirm('Delete this member?')"
                                                        class="btn btn-sm"
                                                        style="background:#fde8e8; color:#c0392b; border:none; border-radius:6px; padding:5px 12px; font-size:12px; font-weight:600;">
                                                    <i class="fa fa-trash me-1"></i>Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<style>
#basic-datatable tbody tr:hover {
    background-color: #f5f8ff !important;
}
.card {
    border-radius: 12px !important;
}
</style>
@endsection