@extends('layouts.app')
@section('title', 'Add User')
@section('page-icon', 'user-plus')

@section('content')

{{-- Google Fonts: Oswald (headings/labels) + Inter (body) --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<div class="mp-page admin-form-page">

    {{-- Top bar --}}
    <div class="mp-topbar">
        <div>
            <div class="mp-eyebrow">Members / New</div>
            <h1 class="mp-title">Add Member</h1>
        </div>
    </div>

    {{-- Error Alerts --}}
    @if ($errors->any())
        <div class="mp-alert" role="alert">
            <i class="fas fa-triangle-exclamation"></i>
            <div>
                <strong>Couldn't save this member</strong>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="mp-layout">

        {{-- LEFT: Form --}}
        <div class="mp-form-panel">
            <form action="{{ route('users.store') }}" method="POST" id="memberForm">
                @csrf

                {{-- Personal Information --}}
                <div class="mp-section-label">Personal information</div>

                <div class="mp-field">
                    <label for="name">Full name <span class="mp-required">*</span></label>
                    <input type="text"
                           name="name"
                           id="name"
                           class="mp-input @error('name') mp-input-error @enderror"
                           value="{{ old('name') }}"
                           placeholder="John Doe"
                           required>
                    @error('name')<div class="mp-error-text">{{ $message }}</div>@enderror
                </div>

                <div class="mp-row">
                    <div class="mp-field">
                        <label for="phone">Phone number</label>
                        <input type="text"
                               name="phone"
                               id="phone"
                               class="mp-input @error('phone') mp-input-error @enderror"
                               value="{{ old('phone') }}"
                               placeholder="+91 98765 43210">
                        @error('phone')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>

                    <div class="mp-field">
                        <label for="email">Email address</label>
                        <input type="email"
                               name="email"
                               id="email"
                               class="mp-input @error('email') mp-input-error @enderror"
                               value="{{ old('email') }}"
                               placeholder="user@example.com">
                        @error('email')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="mp-row">
                    <div class="mp-field">
                        <label for="gender">Gender</label>
                        <select name="gender" id="gender" class="mp-input mp-select @error('gender') mp-input-error @enderror">
                            <option value="">Select</option>
                            <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('gender')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>

                    <div class="mp-field">
                        <label for="dob">Date of birth</label>
                        <input type="date"
                               name="dob"
                               id="dob"
                               class="mp-input @error('dob') mp-input-error @enderror"
                               value="{{ old('dob') }}">
                        @error('dob')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="mp-field">
                    <label for="address">Address</label>
                    <textarea name="address"
                              id="address"
                              class="mp-input mp-textarea @error('address') mp-input-error @enderror"
                              placeholder="Street, City, State, PIN">{{ old('address') }}</textarea>
                    @error('address')<div class="mp-error-text">{{ $message }}</div>@enderror
                </div>

                <div class="mp-divider"></div>

                {{-- Account & Membership --}}
                <div class="mp-section-label">Account &amp; membership</div>

                <div class="mp-row">
                    <div class="mp-field">
                        <label for="membership_id">Membership plan</label>
                        <select name="membership_id" id="membership_id" class="mp-input mp-select @error('membership_id') mp-input-error @enderror">
                            <option value="">Select plan</option>
                            @foreach($memberships as $membership)
                                <option value="{{ $membership->id }}" {{ old('membership_id') == $membership->id ? 'selected' : '' }}>
                                    {{ $membership->plan_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('membership_id')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>

                    <div class="mp-field">
                        <label>Status</label>
                        <div class="mp-toggle">
                            <input type="radio" name="status" id="status_active" value="Active" {{ old('status', 'Active') == 'Active' ? 'checked' : '' }}>
                            <label for="status_active" class="mp-toggle-opt mp-toggle-active">Active</label>

                            <input type="radio" name="status" id="status_inactive" value="Inactive" {{ old('status') == 'Inactive' ? 'checked' : '' }}>
                            <label for="status_inactive" class="mp-toggle-opt mp-toggle-inactive">Inactive</label>
                        </div>
                        @error('status')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="mp-row">
                    <div class="mp-field">
                        <label for="password">Password</label>
                        <input type="password"
                               name="password"
                               id="password"
                               class="mp-input @error('password') mp-input-error @enderror"
                               placeholder="Min 8 characters">
                        @error('password')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>

                    <div class="mp-field">
                        <label for="password_confirmation">Confirm password</label>
                        <input type="password"
                               name="password_confirmation"
                               id="password_confirmation"
                               class="mp-input"
                               placeholder="Re-enter password">
                    </div>
                </div>

                <div class="mp-actions">
                    <button type="submit" class="mp-btn-primary">
                        <i class="fas fa-save"></i> Save Member
                    </button>
                    <a href="{{ route('users.index') }}" class="mp-btn-ghost">Cancel</a>
                </div>
            </form>
        </div>

        {{-- RIGHT: Live member card preview --}}
        <div class="mp-preview-panel">
            <div class="mp-preview-label">Live preview</div>

            <div class="mp-card">
                <div class="mp-card-top">
                    <span class="mp-card-brand"><i class="fas fa-dumbbell"></i> MEMBER ID</span>
                    <span class="mp-card-status" id="pv-status">ACTIVE</span>
                </div>

                <div class="mp-card-avatar" id="pv-avatar">JD</div>

                <div class="mp-card-name" id="pv-name">Full Name</div>
                <div class="mp-card-plan" id="pv-plan">No plan selected</div>

                <div class="mp-card-mid">
                    <div>
                        <div class="mp-card-k">Phone</div>
                        <div class="mp-card-v" id="pv-phone">—</div>
                    </div>
                    <div>
                        <div class="mp-card-k">Gender</div>
                        <div class="mp-card-v" id="pv-gender">—</div>
                    </div>
                </div>

                <div class="mp-card-strip"></div>
            </div>

            <p class="mp-preview-hint">This is roughly how the member's ID card will read once saved.</p>
        </div>

    </div>
</div>

<style>
    :root {
        --ink: #14151a;
        --ink-soft: #4b4d57;
        --canvas: #f5f2ea;
        --panel: #ffffff;
        --line: #e2ddd0;
        --accent: #c9a227;
        --accent-dark: #a8841c;
        --navy: #103b2c;
        --danger: #d92d20;
    }

    body { background: var(--canvas); }

    .mp-page {
        max-width: 1120px;
        margin: 0 auto;
        padding: 2.5rem 1.5rem 4rem;
        font-family: 'Inter', sans-serif;
        color: var(--ink);
    }

    /* Top bar */
    .mp-topbar {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .mp-eyebrow {
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.75rem;
        color: var(--accent-dark);
        font-weight: 600;
        margin-bottom: 0.35rem;
    }
    .mp-title {
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        font-size: 2.1rem;
        letter-spacing: -0.01em;
        margin: 0;
        text-transform: uppercase;
    }
    .mp-back {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
        padding: 0.6rem 1.1rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--panel);
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .mp-back:hover { border-color: var(--ink); transform: translateX(-2px); color: var(--ink); }

    /* Alert */
    .mp-alert {
        display: flex;
        gap: 0.9rem;
        background: #fff5f2;
        border: 1px solid #ffc9b8;
        border-left: 4px solid var(--accent);
        border-radius: 10px;
        padding: 1rem 1.25rem;
        margin-bottom: 1.75rem;
        color: #7a2b12;
    }
    .mp-alert i { margin-top: 0.2rem; color: var(--accent); }
    .mp-alert strong { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; }
    .mp-alert ul { margin: 0; padding-left: 1.1rem; font-size: 0.87rem; }

    /* Layout */
    .mp-layout {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 2rem;
        align-items: start;
    }

    /* Form panel */
    .mp-form-panel {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 2rem;
    }

    .mp-section-label {
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 1.2rem;
    }
    .mp-divider {
        height: 1px;
        background: var(--line);
        margin: 1.6rem 0 1.6rem;
    }

    .mp-field { margin-bottom: 1.4rem; }
    .mp-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .mp-field label {
        display: block;
        font-family: 'Oswald', sans-serif;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
        color: var(--ink-soft);
        margin-bottom: 0.5rem;
    }
    .mp-required { color: var(--accent); }

    .mp-input {
        width: 100%;
        border: 1.5px solid var(--line);
        background: #fcfbf9;
        border-radius: 10px;
        padding: 0.75rem 0.9rem;
        font-size: 0.95rem;
        font-family: 'Inter', sans-serif;
        color: var(--ink);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .mp-input::placeholder { color: #b3b0a6; }
    .mp-input:focus {
        outline: none;
        border-color: var(--accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
    }
    .mp-input-error { border-color: var(--danger) !important; background: #fff8f7; }
    .mp-error-text { color: var(--danger); font-size: 0.78rem; margin-top: 0.35rem; font-weight: 500; }

    .mp-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234b4d57' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.85rem center;
        background-size: 13px;
        padding-right: 2.3rem;
    }

    .mp-textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

    /* Status toggle */
    .mp-toggle { display: flex; gap: 0.6rem; }
    .mp-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .mp-toggle-opt {
        cursor: pointer;
        padding: 0.55rem 1.2rem;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink-soft);
        background: #fcfbf9;
        transition: all 0.18s ease;
    }
    #status_active:checked ~ .mp-toggle-active { background: var(--ink); border-color: var(--ink); color: #fff; }
    #status_inactive:checked ~ .mp-toggle-inactive { background: #f1eee6; border-color: var(--ink-soft); color: var(--ink); }

    /* Actions */
    .mp-actions {
        display: flex;
        gap: 0.9rem;
        margin-top: 1.8rem;
        padding-top: 1.6rem;
        border-top: 1px solid var(--line);
    }
    .mp-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        background: var(--ink);
        color: #fff;
        border: none;
        padding: 0.85rem 1.6rem;
        border-radius: 999px;
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .mp-btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
    .mp-btn-ghost {
        display: inline-flex;
        align-items: center;
        padding: 0.85rem 1.4rem;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        color: var(--ink-soft);
        border: 1.5px solid var(--line);
        transition: border-color 0.2s ease, color 0.2s ease;
    }
    .mp-btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); }

    /* Preview panel */
    .mp-preview-panel { position: sticky; top: 1.5rem; }
    .mp-preview-label {
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--ink-soft);
        margin-bottom: 0.75rem;
    }

    .mp-card {
        position: relative;
        background: linear-gradient(155deg, var(--navy) 0%, #1a4d3a 100%);
        border-radius: 20px;
        padding: 1.75rem 1.6rem;
        color: #fff;
        overflow: hidden;
        min-height: 300px;
        box-shadow: 0 20px 40px -12px rgba(18, 23, 43, 0.45);
    }
    .mp-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201,162,39,0.35), transparent 70%);
    }
    .mp-card-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
    .mp-card-brand {
        font-family: 'Oswald', sans-serif;
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        color: rgba(255,255,255,0.55);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    .mp-card-status {
        font-family: 'Oswald', sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
    }
    .mp-card-status.inactive { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }

    .mp-card-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        border: 1.5px solid rgba(255,255,255,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Oswald', sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        margin-top: 1.5rem;
        position: relative;
        z-index: 1;
    }
    .mp-card-name {
        font-family: 'Oswald', sans-serif;
        font-size: 1.35rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-top: 0.9rem;
        letter-spacing: 0.01em;
        position: relative;
        z-index: 1;
        word-break: break-word;
    }
    .mp-card-plan {
        font-size: 0.82rem;
        color: rgba(255,255,255,0.6);
        margin-top: 0.2rem;
        position: relative;
        z-index: 1;
    }
    .mp-card-mid { display: flex; gap: 2.2rem; margin-top: 1.5rem; position: relative; z-index: 1; }
    .mp-card-k { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 0.25rem; }
    .mp-card-v { font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 600; word-break: break-word; }

    .mp-card-strip {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 8px;
        background: repeating-linear-gradient(-45deg, var(--accent), var(--accent) 10px, transparent 10px, transparent 20px);
        opacity: 0.85;
    }

    .mp-preview-hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.5; }

    /* Responsive */
    @media (max-width: 860px) {
        .mp-layout { grid-template-columns: 1fr; }
        .mp-preview-panel { position: static; }
        .mp-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
        .mp-title { font-size: 1.6rem; }
        .mp-form-panel { padding: 1.4rem; }
        .mp-actions { flex-direction: column; }
        .mp-btn-primary, .mp-btn-ghost { justify-content: center; }
    }
</style>

<script>
    (function () {
        const nameInput = document.getElementById('name');
        const phoneInput = document.getElementById('phone');
        const genderInput = document.getElementById('gender');
        const membershipInput = document.getElementById('membership_id');
        const statusActive = document.getElementById('status_active');
        const statusInactive = document.getElementById('status_inactive');

        const pvName = document.getElementById('pv-name');
        const pvAvatar = document.getElementById('pv-avatar');
        const pvPhone = document.getElementById('pv-phone');
        const pvGender = document.getElementById('pv-gender');
        const pvPlan = document.getElementById('pv-plan');
        const pvStatus = document.getElementById('pv-status');

        function initials(name) {
            const parts = name.trim().split(/\s+/).filter(Boolean);
            if (!parts.length) return 'JD';
            if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase();
            return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
        }

        function update() {
            const name = nameInput.value.trim();
            pvName.textContent = name || 'Full Name';
            pvAvatar.textContent = initials(name);
            pvPhone.textContent = phoneInput.value.trim() || '—';
            pvGender.textContent = genderInput.value || '—';

            const planText = membershipInput.options[membershipInput.selectedIndex]?.text;
            pvPlan.textContent = (membershipInput.value && planText) ? planText : 'No plan selected';

            if (statusInactive.checked) {
                pvStatus.textContent = 'INACTIVE';
                pvStatus.classList.add('inactive');
            } else {
                pvStatus.textContent = 'ACTIVE';
                pvStatus.classList.remove('inactive');
            }
        }

        [nameInput, phoneInput, genderInput, membershipInput, statusActive, statusInactive]
            .forEach(el => el.addEventListener('input', update));

        update();
    })();
</script>

@endsection