@extends('layouts.anggota')

@section('content')
    <style>
       

        .card.shadow-lg {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card.shadow-lg:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
        }

        .btn-sm,
        .btn-lg {
            transition: all 0.2s ease-in-out;
        }

        .btn-primary:hover,
        .btn-info:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
        }

        .header-section {
            border-left: 5px solid #4c51bf;
            padding-left: 1rem;
            margin-bottom: 1.5rem;
        }

        .header-section .breadcrumb {
            margin-bottom: 0.5rem !important;
        }

        .animated-card {
            animation: slideInDown 0.6s ease-out;
            animation-fill-mode: both;
        }

        .staggered-item {
            opacity: 0;
            animation: fadeIn 0.4s ease-out;
            animation-fill-mode: forwards;
        }

        .staggered-item.delay-1 {
            animation-delay: 0.6s;
        }

        .staggered-item.delay-2 {
            animation-delay: 0.8s;
        }

        .staggered-item.delay-3 {
            animation-delay: 1.0s;
        }

        #anggotaTable tbody tr:hover {
            background-color: #f0f8ff;
            transition: background-color 0.3s ease;
        }

        @keyframes slideInDown {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>

    <div class="container-fluid py-4">

        <div class="header-section">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-sm">
                    </li>
                    <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Anggota</li>
                </ol>
            </nav>
            <h3 class="font-weight-bolder mb-0 text-primary">Daftar Anggota</h3>
        </div>

        <div class="card shadow-lg border-0 mb-4 animated-card" style="border-radius: 1rem;">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center bg-white staggered-item delay-1"
                style="border-top-left-radius: 1rem; border-top-right-radius: 1rem;">
                <h5 class="font-weight-bolder text-primary mb-0">
                    <i class="fas fa-users me-2"></i>Anggota Terdaftar
                </h5>
            </div>

            <div class="card-body p-4">

                <div class="mb-4 staggered-item delay-2">
                    <form action="{{ route('admin.anggota.index') }}" method="GET"
                        class="d-flex gap-2 flex-wrap align-items-center">
                        <input type="text" name="search" class="form-control form-control-sm"
                            placeholder="Cari nama atau email..." value="{{ request('search') }}">

                        <select name="status" class="form-select form-select-sm" style="width:auto;">
                            <option value="">Semua Status</option>
                            <option value="menunggu" {{ request('status') == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
                            <option value="disetujui" {{ request('status') == 'disetujui' ? 'selected' : '' }}>Disetujui
                            </option>
                            <option value="ditolak" {{ request('status') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                        </select>

                        <button class="btn btn-outline-primary btn-sm" type="submit">
                            <i class="fas fa-search"></i> Cari
                        </button>
                        @if(request('search') || request('status'))
                            <a href="{{ route('admin.anggota.index') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-times"></i> Reset
                            </a>
                        @endif
                    </form>
                </div>

                <div class="table-responsive staggered-item delay-3">
                    <table id="anggotaTable" class="table table-striped align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    No</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Nama
                                </th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Email
                                </th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">No.
                                    Telepon</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Alamat
                                </th>
                                <th
                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2 text-center">
                                    Status</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($members as $member)
                                <tr>
                                    <td class="align-middle text-center text-sm">{{ $loop->iteration }}</td>
                                    <td class="align-middle text-sm">{{ $member->nama }}</td>
                                    <td class="align-middle text-sm">{{ $member->email }}</td>
                                    <td class="align-middle text-sm">{{ $member->no_hp ?? '-' }}</td>
                                    <td class="align-middle text-sm">{{ $member->alamat }}</td>

                                    <td class="align-middle text-center">
                                        @if($member->status == 'menunggu')
                                            <span class="badge bg-warning text-dark">Menunggu</span>
                                        @elseif($member->status == 'disetujui')
                                            <span class="badge bg-success">Disetujui</span>
                                        @else
                                            <span class="badge bg-danger">Ditolak</span>
                                        @endif
                                    </td>

                                    <td class="align-middle text-center">
                                        <div class="d-flex justify-content-center gap-2 flex-wrap">
                                            @if($member->status === 'menunggu')
                                                <form action="{{ route('admin.anggota.approve', $member->id) }}" method="POST"
                                                    class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="btn btn-success btn-sm"
                                                        onclick="return confirm('Setujui anggota ini?')">
                                                        <i class="fas fa-check"></i> Setujui
                                                    </button>
                                                </form>
                                                <form action="{{ route('admin.anggota.reject', $member->id) }}" method="POST"
                                                    class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="btn btn-danger btn-sm"
                                                        onclick="return confirm('Tolak anggota ini?')">
                                                        <i class="fas fa-times"></i> Tolak
                                                    </button>
                                                </form>
                                            @endif

                                            <a href="{{ route('admin.anggota.edit', $member->id) }}"
                                                class="btn btn-primary btn-sm">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                            <a href="{{ route('admin.anggota.cetak', $member->id) }}" target="_blank"
                                                class="btn btn-info btn-sm">
                                                <i class="fas fa-id-card"></i> Cetak
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                        Tidak ada data anggota ditemukan.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-center mt-4">
                    {{ $members->links('pagination::bootstrap-4') }}
                </div>

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