{{--
    文件功能：婚礼档位配置页（5档固定，可修改名称/图标/金额/描述/启用状态）

    @author   ChatRoom Laravel
    @version  1.0.0
--}}

@extends('admin.layouts.app')

@section('title', '婚礼档位配置')

@section('content')

    <div class="flex items-center justify-between mb-5">
        <div>
            <h2 class="text-xl font-bold text-gray-800">🎊 婚礼档位配置</h2>
            <p class="text-sm text-gray-500 mt-1">5个固定档位，可修改名称、金额及启用状态（不可增删）</p>
        </div>
        <a href="{{ route('admin.marriages.index') }}" class="text-sm text-indigo-600 hover:underline">← 返回总览</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
        @foreach ($tiers as $tier)
            <div class="bg-white rounded-xl shadow-sm border overflow-hidden {{ $tier->is_active ? '' : 'opacity-60' }}"
                x-data="{ editing: false }">
                {{-- 档位头部 --}}
                <div class="px-5 py-4 border-b flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <span class="text-2xl">{{ $tier->icon }}</span>
                        <div>
                            <div class="font-bold text-gray-800">{{ $tier->name }}</div>
                            <div class="text-xs text-gray-400">第 {{ $tier->tier }} 档</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        @if (!$tier->is_active)
                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">已禁用</span>
                        @endif
                        <button @click="editing = !editing"
                            class="text-xs bg-indigo-50 text-indigo-600 font-bold px-3 py-1.5 rounded hover:bg-indigo-600 hover:text-white transition"
                            x-text="editing ? '收起' : '编辑'">
                        </button>
                    </div>
                </div>

                {{-- 当前值展示 --}}
                <div class="px-5 py-4 text-sm" x-show="!editing">
                    <div class="flex justify-between mb-2">
                        <span class="text-gray-500">金币总额</span>
                        <span class="font-bold text-amber-600">{{ number_format($tier->amount) }} 金</span>
                    </div>
                    @if ($tier->description)
                        <p class="text-xs text-gray-400">{{ $tier->description }}</p>
                    @endif
                </div>

                {{-- 编辑表单 --}}
                <div x-show="editing" style="display:none" class="px-5 py-4">
                    <form action="{{ route('admin.marriages.tiers.update', $tier->id) }}" method="POST" class="space-y-3">
                        @csrf @method('PUT')
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-bold text-gray-600 mb-1">档位名称</label>
                                <input type="text" name="name" value="{{ $tier->name }}" required maxlength="30"
                                    class="w-full border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-600 mb-1">图标 (Emoji)</label>
                                <input type="text" name="icon" value="{{ $tier->icon }}" required maxlength="20"
                                    class="w-full border rounded-lg px-3 py-1.5 text-sm focus:outline-none">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-600 mb-1">金币总额</label>
                            <input type="number" name="amount" value="{{ $tier->amount }}" required min="1"
                                class="w-full border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-600 mb-1">描述</label>
                            <input type="text" name="description" value="{{ $tier->description }}" maxlength="100"
                                class="w-full border rounded-lg px-3 py-1.5 text-sm focus:outline-none">
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1" id="active_{{ $tier->id }}"
                                @checked($tier->is_active) class="rounded">
                            <label for="active_{{ $tier->id }}" class="text-sm text-gray-700">启用此档位</label>
                        </div>
                        <div class="flex justify-end gap-2 pt-1">
                            <button type="button" @click="editing = false"
                                class="px-3 py-1.5 border rounded text-sm text-gray-600">取消</button>
                            <button type="submit"
                                class="px-4 py-1.5 bg-indigo-600 text-white rounded text-sm font-bold hover:bg-indigo-700 transition">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        @endforeach
    </div>

@endsection