@extends('layouts.app')
@section('title', 'Add Membership')
@section('page-icon', 'circle-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">Memberships / New</div>
            <h1 class="mp-title">Build a Plan</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 plan</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('memberships.store') }}" method="POST" id="planForm">
                @csrf

                <div class="mp-field">
                    <label for="plan_name">Plan name</label>
                    <input type="text"
                           name="plan_name"
                           id="plan_name"
                           class="mp-input @error('plan_name') mp-input-error @enderror"
                           value="{{ old('plan_name') }}"
                           placeholder="e.g. Iron Membership"
                           required>
                    @error('plan_name')<div class="mp-error-text">{{ $message }}</div>@enderror
                </div>

                <div class="mp-row">
                    <div class="mp-field">
                        <label for="amount">Amount (₹)</label>
                        <input type="number"
                               step="0.01"
                               name="amount"
                               id="amount"
                               class="mp-input @error('amount') mp-input-error @enderror"
                               value="{{ old('amount') }}"
                               placeholder="0.00"
                               required>
                        @error('amount')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>

                    <div class="mp-field">
                        <label for="duration">Duration</label>
                        <select name="duration" id="duration" class="mp-input mp-select @error('duration') mp-input-error @enderror" required>
                            <option value="">Select</option>
                            <option value="30"  {{ old('duration') == '30'  ? 'selected' : '' }}>30 Days</option>
                            <option value="90"  {{ old('duration') == '90'  ? 'selected' : '' }}>90 Days</option>
                            <option value="180" {{ old('duration') == '180' ? 'selected' : '' }}>180 Days</option>
                            <option value="365" {{ old('duration') == '365' ? 'selected' : '' }}>365 Days</option>
                        </select>
                        @error('duration')<div class="mp-error-text">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="mp-field">
                    <label>Status</label>
                    <div class="mp-toggle" id="statusToggle">
                        <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 class="mp-field">
                    <label for="description">Description <span>(optional)</span></label>
                    <textarea name="description"
                              id="description"
                              class="mp-input mp-textarea @error('description') mp-input-error @enderror"
                              placeholder="What's included in this plan?">{{ old('description') }}</textarea>
                    @error('description')<div class="mp-error-text">{{ $message }}</div>@enderror
                </div>

                <div class="mp-actions">
                    <button type="submit" class="mp-btn-primary">
                        Create Plan <i class="fas fa-arrow-right"></i>
                    </button>
                    <a href="{{ route('memberships.index') }}" class="mp-btn-ghost">Cancel</a>
                </div>
            </form>
        </div>

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

            <div class="mp-card" id="previewCard">
                <div class="mp-card-top">
                    <span class="mp-card-brand">MEMBER PASS</span>
                    <span class="mp-card-status" id="pv-status">ACTIVE</span>
                </div>

                <div class="mp-card-name" id="pv-name">Plan Name</div>

                <div class="mp-card-mid">
                    <div>
                        <div class="mp-card-k">Price</div>
                        <div class="mp-card-v" id="pv-amount">₹0</div>
                    </div>
                    <div>
                        <div class="mp-card-k">Duration</div>
                        <div class="mp-card-v" id="pv-duration">—</div>
                    </div>
                </div>

                <div class="mp-card-desc" id="pv-desc">Add a description to see it here.</div>

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

            <p class="mp-preview-hint">This is roughly how the plan will read to your front-desk staff and members.</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;
    }

    .mp-page {
        max-width: 1080px;
        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.15fr 0.85fr;
        gap: 2rem;
        align-items: start;
    }

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

    .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-field label span { text-transform: none; letter-spacing: 0; color: #9a9a9a; font-weight: 400; }

    .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: 100px;
        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: 260px;
        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.18em;
        color: rgba(255,255,255,0.55);
        font-weight: 600;
    }
    .mp-card-status {
        font-family: 'Oswald', sans-serif;
        font-size: 0.68rem;
        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-name {
        font-family: 'Oswald', sans-serif;
        font-size: 1.6rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-top: 1.6rem;
        letter-spacing: 0.01em;
        position: relative;
        z-index: 1;
        word-break: break-word;
    }
    .mp-card-mid {
        display: flex;
        gap: 2.2rem;
        margin-top: 1.4rem;
        position: relative;
        z-index: 1;
    }
    .mp-card-k {
        font-size: 0.68rem;
        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: 1.15rem;
        font-weight: 600;
    }
    .mp-card-desc {
        margin-top: 1.4rem;
        font-size: 0.85rem;
        line-height: 1.5;
        color: rgba(255,255,255,0.7);
        position: relative;
        z-index: 1;
    }
    .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('plan_name');
        const amountInput = document.getElementById('amount');
        const durationInput = document.getElementById('duration');
        const descInput = document.getElementById('description');
        const statusActive = document.getElementById('status_active');
        const statusInactive = document.getElementById('status_inactive');

        const pvName = document.getElementById('pv-name');
        const pvAmount = document.getElementById('pv-amount');
        const pvDuration = document.getElementById('pv-duration');
        const pvDesc = document.getElementById('pv-desc');
        const pvStatus = document.getElementById('pv-status');

        const durationLabels = { '30': '30 Days', '90': '90 Days', '180': '180 Days', '365': '365 Days' };

        function formatAmount(val) {
            const n = parseFloat(val);
            if (isNaN(n)) return '₹0';
            return '₹' + n.toLocaleString('en-IN', { maximumFractionDigits: 2 });
        }

        function update() {
            pvName.textContent = nameInput.value.trim() || 'Plan Name';
            pvAmount.textContent = formatAmount(amountInput.value);
            pvDuration.textContent = durationLabels[durationInput.value] || '—';
            pvDesc.textContent = descInput.value.trim() || 'Add a description to see it here.';

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

        [nameInput, amountInput, durationInput, descInput, statusActive, statusInactive]
            .forEach(el => el.addEventListener('input', update));

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

@endsection