@extends('layouts.dashboard')

@section('content')
<style>
:root {
    --primary-color: #4c51bf;
    --primary-hover: #5a67d8;
    --border-color: #e2e8f0;
    --bg-light: #ffffff;
    --text-dark: #2d3748;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #7f9cf5;
        --primary-hover: #a3bffa;
        --bg-light: #1e293b;
        --text-dark: #e2e8f0;
        --border-color: #4a5568;
    }
}

.center-wrapper {
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc, #edf2f7);
}

@media (prefers-color-scheme: dark) {
    .center-wrapper {
        background: linear-gradient(135deg, #1a202c, #2d3748);
    }
}

.card-form {
    width: 100%;
    max-width: 700px;
    border-radius: 1rem;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
}
.card-form:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}
.card-header h3 {
    color: var(--primary-color);
    font-weight: 700;
}

.form-label {
    color: var(--text-dark);
    font-weight: 600;
}
.input-group-text {
    background-color: #f8f9fa;
    color: #718096;
}
.form-control-lg:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(76, 81, 191, 0.25);
}

.btn-lg {
    transition: all 0.25s ease-in-out;
    border-radius: 0.5rem;
}
.btn-primary {
    background-color: var(--primary-color);
    border: none;
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}
.btn-outline-secondary:hover {
    background-color: #edf2f7;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

@keyframes fadeInUp {
    from { transform: translateY(25px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animated-card {
    animation: fadeInUp 0.6s ease-out both;
}
</style>

<div class="center-wrapper">
    <div class="card card-form shadow-lg border-0 animated-card">
        <div class="card-header bg-white border-0 pt-4 pb-2 px-4">
            <h3 class="mb-1 text-primary"><i class="fas fa-user-plus me-2"></i>Formulir Pendaftaran Anggota</h3>
            <p class="text-muted mb-0">Lengkapi data berikut untuk menambahkan anggota baru.</p>
        </div>

        <div class="card-body p-4">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

<form action="{{ route('user.member.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="mb-4">
                    <label for="nama" class="form-label">Nama Lengkap</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                        <input type="text" name="nama" id="nama" class="form-control form-control-lg" placeholder="Masukkan nama lengkap" required>
                    </div>
                </div>

                <div class="mb-4">
                    <label for="nip_nim" class="form-label">NIP/NIM</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                        <input type="text" name="nip_nim" id="nip_nim" class="form-control form-control-lg" placeholder="Masukkan NIP/NIM" required>
                    </div>
                </div>

                <div class="mb-4">
                    <label for="email" class="form-label">Email Aktif</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                        <input type="email" name="email" id="email" class="form-control form-control-lg" placeholder="contoh@email.com" required>
                    </div>
                </div>

                <div class="mb-4">
                    <label for="no_hp" class="form-label">Nomor HP</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
                        <input type="text" name="no_hp" id="no_hp" class="form-control form-control-lg" placeholder="0812xxxxxxx" required>
                    </div>
    <div class="mb-4">
        <label for="foto" class="form-label">Foto Anggota</label>
        <div class="input-group">
            <span class="input-group-text"><i class="fas fa-image"></i></span>
            <input type="file" name="foto" id="foto" class="form-control form-control-lg" accept="image/*">
        </div>
        <small class="text-muted">Format: JPG, JPEG, PNG — Maksimal 2MB</small>
    </div>
                <div class="mb-4">
                    <label for="alamat" class="form-label">Alamat Lengkap</label>
                    <div class="input-group">
                        <span class="input-group-text align-items-start pt-2"><i class="fas fa-map-marker-alt"></i></span>
                        <textarea name="alamat" id="alamat" class="form-control form-control-lg" rows="4" placeholder="Detail jalan, kota, dan kode pos" required></textarea>
                    </div>
                </div>

                <div class="alert alert-info small mt-4" style="border-radius: 0.5rem;">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong>Perhatian!</strong> Semua data yang diisi harus <strong>valid</strong> dan <strong>sesuai dengan identitas Anda</strong>.
                    Pastikan tidak ada kesalahan agar proses pendaftaran anggota dapat disetujui oleh admin.
                </div>

                <div class="d-flex justify-content-between align-items-center pt-3">
                    <a href="{{ route('user.koleksi') }}" class="btn btn-outline-secondary btn-lg">
                        <i class="fas fa-arrow-left me-1"></i> Batal / Kembali
                    </a>
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-save me-1"></i> Simpan Anggota
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection