@extends('layouts.franchise', ['heading' => 'Create Member'])

@section('content')
    @if(session('status'))
        <div class="mb-4 rounded bg-emerald-100 p-3 text-emerald-800">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded bg-rose-100 p-3 text-rose-800">
            <ul class="list-disc pl-5 text-sm">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="mb-6 rounded bg-white p-4 shadow">
        <div class="mb-2 font-semibold">Send OTP (Mobile)</div>
        <form method="POST" action="{{ route('franchise.members.otp') }}" class="flex flex-wrap gap-2">
            @csrf
            <input name="mobile" placeholder="Mobile" class="rounded border p-2 text-sm" required>
            <button class="rounded bg-slate-900 px-3 py-2 text-sm text-white">Send OTP</button>
        </form>
    </div>

    <div class="rounded-2xl bg-white p-4 shadow">
        <div class="mb-3 font-semibold">Create Member</div>
        <form method="POST" action="{{ route('franchise.members.store') }}" class="grid grid-cols-1 gap-3 md:grid-cols-2">
            @csrf
            <input name="name" placeholder="Full Name" class="rounded border p-2 text-sm" required>
            <input name="mobile" placeholder="Mobile" class="rounded border p-2 text-sm" required>
            <input name="email" placeholder="Email (optional)" class="rounded border p-2 text-sm">
            <input name="password" placeholder="Password" type="password" class="rounded border p-2 text-sm" required>

            <input name="sponsor_code" placeholder="Sponsor Code (optional)" class="rounded border p-2 text-sm">
            <input name="placement_parent_id" placeholder="Placement Parent ID" class="rounded border p-2 text-sm" required>

            <select name="placement_leg" class="rounded border p-2 text-sm">
                <option value="left">Left</option>
                <option value="right">Right</option>
                <option value="auto">Auto</option>
            </select>

            <input name="package_amount" placeholder="Package Amount" type="number" step="0.01" min="0" class="rounded border p-2 text-sm" required>

            <select name="payment_mode" class="rounded border p-2 text-sm">
                <option value="cash">Cash</option>
                <option value="upi">UPI</option>
                <option value="gateway">Gateway</option>
                <option value="wallet">Wallet</option>
            </select>

            <input name="utr" placeholder="UTR (for UPI)" class="rounded border p-2 text-sm">
            <input name="otp" placeholder="OTP" class="rounded border p-2 text-sm" required>
            <input name="address" placeholder="Address (optional)" class="rounded border p-2 text-sm md:col-span-2">

            <div class="md:col-span-2">
                <button class="rounded bg-emerald-600 px-4 py-2 text-sm text-white">Create Member</button>
            </div>
        </form>
    </div>

    <div class="mt-6">
        <div class="mb-2 font-semibold">Recently Created Members</div>
        <div class="grid grid-cols-1 gap-3">
            @forelse($members as $member)
                <div class="rounded-2xl bg-white p-4 shadow">
                    <div class="font-semibold">{{ $member->member_code }} - {{ $member->name }}</div>
                    <div class="text-xs text-slate-500">Mobile: {{ $member->mobile }}</div>
                    <div class="text-xs text-slate-500">Status: {{ $member->status }}</div>
                    <div class="text-xs text-slate-500">Joined: {{ $member->joined_at ? \Illuminate\Support\Carbon::parse($member->joined_at)->format('Y-m-d') : '-' }}</div>
                </div>
            @empty
                <div class="rounded-2xl bg-white p-4 text-center text-slate-500">No members created yet.</div>
            @endforelse
        </div>

        <div class="mt-3">{{ $members->links() }}</div>
    </div>
@endsection