@extends('layouts.app')
@section('title', 'Memberships')
@section('page-icon', 'id-card')

@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">

    {{-- Top bar --}}
    <div class="mp-topbar">
        <div>
            <div class="mp-eyebrow">Memberships</div>
            <h1 class="mp-title">Your Plans</h1>
            <p class="mp-subtitle">Manage your membership offerings</p>
        </div>
        <a href="{{ route('memberships.create') }}" class="mp-btn-primary">
            <i class="fas fa-plus"></i> Add Membership
        </a>
    </div>

    {{-- Success Alert --}}
    @if(session('success'))
        <div class="mp-alert-success" role="alert">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
            <button type="button" class="mp-alert-close" data-bs-dismiss="alert" aria-label="Close">
                <i class="fas fa-xmark"></i>
            </button>
        </div>
    @endif

    {{-- Plans Grid --}}
    <div class="mp-grid">
        @forelse($memberships as $membership)
            <div class="mp-card {{ $membership->status == 'Active' ? '' : 'is-inactive' }}">
                <div class="mp-card-top">
                    <span class="mp-card-brand"><i class="fas fa-dumbbell"></i> MEMBER PASS</span>
                    <span class="mp-card-status {{ $membership->status == 'Active' ? '' : 'inactive' }}">
                        {{ strtoupper($membership->status) }}
                    </span>
                </div>

                <div class="mp-card-name">{{ $membership->plan_name }}</div>

                <div class="mp-card-mid">
                    <div>
                        <div class="mp-card-k">Price</div>
                        <div class="mp-card-v">₹{{ number_format($membership->amount, 2) }}</div>
                    </div>
                    <div>
                        <div class="mp-card-k">Duration</div>
                        <div class="mp-card-v">{{ $membership->duration }} Days</div>
                    </div>
                </div>

                <div class="mp-card-footer">
                    <a href="{{ route('memberships.edit', $membership->id) }}" class="mp-icon-btn mp-icon-edit" title="Edit">
                        <i class="fas fa-pen"></i>
                    </a>
                    <form action="{{ route('memberships.destroy', $membership->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="mp-icon-btn mp-icon-delete delete-btn" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </div>

                <div class="mp-card-strip"></div>
            </div>
        @empty
            <div class="mp-empty">
                <i class="fas fa-box-open"></i>
                <h5>No membership plans found</h5>
                <p>Click "Add Membership" to create your first plan.</p>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    <div class="mp-pagination-wrap">
        {{ $memberships->links() }}
    </div>
</div>

{{-- SweetAlert Script --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const form = this.closest('form');

                Swal.fire({
                    title: 'Delete Membership?',
                    text: 'This action cannot be undone.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#c9a227',
                    cancelButtonColor: '#4b4d57',
                    confirmButtonText: 'Yes, Delete',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    });
</script>

<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: 1240px;
        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-subtitle {
        margin: 0.3rem 0 0;
        color: var(--ink-soft);
        font-size: 0.92rem;
    }

    .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;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .mp-btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); color: #fff; }

    /* Success alert */
    .mp-alert-success {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        background: #f2fbf1;
        border: 1px solid #bfe6bb;
        border-left: 4px solid #2f9e44;
        border-radius: 10px;
        padding: 0.85rem 1.1rem;
        margin-bottom: 1.75rem;
        color: #1e6b2c;
        font-size: 0.88rem;
        position: relative;
    }
    .mp-alert-success i:first-child { color: #2f9e44; }
    .mp-alert-close {
        margin-left: auto;
        background: none;
        border: none;
        color: #1e6b2c;
        opacity: 0.6;
        cursor: pointer;
    }
    .mp-alert-close:hover { opacity: 1; }

    /* Grid */
    .mp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.4rem;
    }

    /* Card — matches the live-preview card from the builder */
    .mp-card {
        position: relative;
        background:
            radial-gradient(circle at 88% 12%, rgba(255,255,255,.18), transparent 27%),
            linear-gradient(145deg, #312e81 0%, #4f46e5 55%, #6d28d9 100%);
        border-radius: 20px;
        padding: 1.5rem 1.4rem 1.7rem;
        color: #fff;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 18px 38px -14px rgba(79,70,229,.55);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        display: flex;
        flex-direction: column;
    }
    .mp-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 46px -14px rgba(79,70,229,.65);
    }
    .mp-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
    }
    .mp-card.is-inactive::before {
        background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    }
    .mp-card.is-inactive {
        background: linear-gradient(155deg, #23252e 0%, #2c2e38 100%);
    }

    .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.68rem;
        letter-spacing: 0.14em;
        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.65rem;
        border-radius: 999px;
        background: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.22);
        color: #fff;
        white-space: nowrap;
    }
    .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.4rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-top: 1.3rem;
        letter-spacing: 0.01em;
        position: relative;
        z-index: 1;
        word-break: break-word;
        line-height: 1.2;
    }

    .mp-card-mid {
        display: flex;
        gap: 1.8rem;
        margin-top: 1.2rem;
        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.68);
        margin-bottom: 0.25rem;
    }
    .mp-card-v {
        font-family: 'Oswald', sans-serif;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .mp-card-footer {
        display: flex;
        gap: 0.55rem;
        margin-top: 1.5rem;
        padding-top: 1.1rem;
        border-top: 1px solid rgba(255,255,255,0.12);
        position: relative;
        z-index: 1;
    }
    .mp-icon-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1.5px solid rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.85);
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.18s ease;
        text-decoration: none;
    }
    .mp-icon-edit:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }
    .mp-icon-delete:hover {
        background: var(--danger);
        border-color: var(--danger);
        color: #fff;
    }

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

    /* Empty state */
    .mp-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 4rem 1rem;
        color: var(--ink-soft);
    }
    .mp-empty i {
        font-size: 2.4rem;
        display: block;
        margin-bottom: 1rem;
        color: #cfcabd;
    }
    .mp-empty h5 {
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        color: var(--ink);
        font-weight: 600;
        margin-bottom: 0.4rem;
    }
    .mp-empty p { font-size: 0.85rem; margin: 0; }

    /* Pagination */
    .mp-pagination-wrap {
        display: flex;
        justify-content: center;
        margin-top: 2.5rem;
    }
    .mp-pagination-wrap .pagination { gap: 4px; }
    .mp-pagination-wrap .page-link {
        border: none;
        border-radius: 999px !important;
        padding: 0.5rem 0.95rem;
        font-size: 0.85rem;
        color: var(--ink-soft);
        font-weight: 500;
    }
    .mp-pagination-wrap .page-link:hover { background: #efece3; }
    .mp-pagination-wrap .page-item.active .page-link {
        background: var(--ink);
        color: #fff;
    }

    /* Responsive */
    @media (max-width: 480px) {
        .mp-title { font-size: 1.6rem; }
        .mp-topbar { align-items: flex-start; }
        .mp-btn-primary { width: 100%; justify-content: center; }
        .mp-grid { grid-template-columns: 1fr; }
    }
</style>

@endsection