@extends('layouts.super-admin')
@section('title', 'Edit Client')
@section('subtitle', $client->company_name)

@section('content')
<form method="POST" action="{{ route('super-admin.clients.update', $client) }}" enctype="multipart/form-data" class="max-w-3xl space-y-5 pb-24">
    @csrf
    @method('PUT')

    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-7 h-7 rounded-lg bg-red-50 flex items-center justify-center text-sm">🏢</span>
            <h2 class="font-semibold text-gray-900">Company Details</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <input name="company_name" value="{{ old('company_name', $client->company_name) }}" placeholder="Company Name" required class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
            <input name="company_address" value="{{ old('company_address', $client->company_address) }}" placeholder="Company Address" required class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-7 h-7 rounded-lg bg-red-50 flex items-center justify-center text-sm">🏷️</span>
            <h2 class="font-semibold text-gray-900">Brand Details</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <input name="brand_name" value="{{ old('brand_name', $client->brand_name) }}" placeholder="Brand Name" required class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
            <input name="brand_address" value="{{ old('brand_address', $client->brand_address) }}" placeholder="Brand Address" required class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-7 h-7 rounded-lg bg-red-50 flex items-center justify-center text-sm">🖼️</span>
            <h2 class="font-semibold text-gray-900">Branding</h2>
        </div>
        <p class="text-xs text-gray-400 mb-3">Shown on this client's own landing page (<span class="font-mono">/r/{{ $client->slug }}</span>) and dashboard.</p>
        <div class="flex items-center gap-4">
            @if ($client->logoUrl())
                <img src="{{ $client->logoUrl() }}" alt="{{ $client->brand_name }}" class="h-14 w-14 object-contain border border-gray-100 rounded-lg p-1">
            @endif
            <div class="border border-dashed border-gray-300 rounded-xl px-3.5 py-2.5 hover:border-red-400 transition flex-1 sm:max-w-xs">
                <input type="file" name="logo" accept="image/*"
                       class="text-sm w-full text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-red-50 file:text-red-600 hover:file:bg-red-100 cursor-pointer">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center text-sm">👤</span>
            <h2 class="font-semibold text-gray-900">Contact Details</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <input name="contact_person_name" value="{{ old('contact_person_name', $client->contact_person_name) }}" placeholder="Contact Person Name" required class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
            <input name="contact_phone" type="tel" value="{{ old('contact_phone', $client->contact_phone) }}" placeholder="Contact Phone Number" required class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
            <input name="contact_email" type="email" value="{{ old('contact_email', $client->contact_email) }}" placeholder="Email Address" required class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-7 h-7 rounded-lg bg-amber-50 flex items-center justify-center text-sm">🧾</span>
            <h2 class="font-semibold text-gray-900">GST Details</h2>
        </div>
        <label class="inline-flex items-center gap-2 text-sm mb-3 cursor-pointer">
            <input type="checkbox" id="gst_applicable" name="gst_applicable" value="1" class="w-4 h-4 rounded text-red-600 focus:ring-red-500" onchange="document.getElementById('gst_number_wrap').classList.toggle('hidden', !this.checked)" @checked(old('gst_applicable', $client->gst_applicable))>
            GST Applicable
        </label>
        <div id="gst_number_wrap" class="{{ old('gst_applicable', $client->gst_applicable) ? '' : 'hidden' }}">
            <input name="gst_number" value="{{ old('gst_number', $client->gst_number) }}" placeholder="GST Number (e.g. 22AAAAA0000A1Z5)" class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm w-full sm:w-1/2 focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-7 h-7 rounded-lg bg-emerald-50 flex items-center justify-center text-sm">🧩</span>
            <h2 class="font-semibold text-gray-900">Software Flow</h2>
        </div>
        @php $currentFlow = old('software_flow', $client->kiosk_enabled ? 'kiosk' : 'waiter'); @endphp
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <label class="flex items-center gap-3 border border-gray-200 rounded-xl px-4 py-3 cursor-pointer hover:border-red-300 transition has-[:checked]:border-red-400 has-[:checked]:bg-red-50/50">
                <input type="radio" id="flow_kiosk" name="software_flow" value="kiosk" class="w-4 h-4 text-red-600 focus:ring-red-500" onchange="toggleFlow()" @checked($currentFlow === 'kiosk')>
                <span>
                    <span class="block text-sm font-medium text-gray-800">🖥️ Kiosk Flow</span>
                    <span class="block text-xs text-gray-400">Self-service ordering touchscreens</span>
                </span>
            </label>
            <label class="flex items-center gap-3 border border-gray-200 rounded-xl px-4 py-3 cursor-pointer hover:border-red-300 transition has-[:checked]:border-red-400 has-[:checked]:bg-red-50/50">
                <input type="radio" id="flow_waiter" name="software_flow" value="waiter" class="w-4 h-4 text-red-600 focus:ring-red-500" onchange="toggleFlow()" @checked($currentFlow === 'waiter')>
                <span>
                    <span class="block text-sm font-medium text-gray-800">🧑‍🍳 Waiter App Flow</span>
                    <span class="block text-xs text-gray-400">Orders, KOT &amp; Cashier included</span>
                </span>
            </label>
        </div>
        <p class="text-xs text-gray-400 mt-3">Choose one — a client runs either the Kiosk flow or the Waiter App flow, not both.</p>
    </div>

    <div id="upi_wrap" class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm {{ $currentFlow === 'waiter' ? '' : 'hidden' }}">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-7 h-7 rounded-lg bg-pink-50 flex items-center justify-center text-sm">💳</span>
            <h2 class="font-semibold text-gray-900">Waiter App Payment Configuration</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <input name="upi_id" value="{{ old('upi_id', $client->upi_id) }}" placeholder="UPI ID" class="border border-gray-200 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
            <div>
                <div class="border border-dashed border-gray-300 rounded-xl px-3.5 py-2.5 hover:border-red-400 transition">
                    <input type="file" name="upi_qr_code" accept="image/*"
                           class="text-sm w-full text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-red-50 file:text-red-600 hover:file:bg-red-100 cursor-pointer">
                </div>
                @if ($client->upi_qr_code_path)
                    <p class="text-xs text-gray-400 mt-1.5 flex items-center gap-1">
                        <img src="{{ Storage::url($client->upi_qr_code_path) }}" alt="Current QR" class="w-5 h-5 rounded border border-gray-200 object-cover">
                        QR on file — upload a new image only to replace it.
                    </p>
                @endif
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-7 h-7 rounded-lg bg-violet-50 flex items-center justify-center text-sm">💎</span>
            <h2 class="font-semibold text-gray-900">Subscription Plan</h2>
        </div>
        <p class="text-xs text-gray-400 mb-3">If you change the Software Flow above, pick a matching plan below — plans and clients are both locked to one flow.</p>

        @if ($plans->isEmpty())
            <p class="text-sm text-rose-500">No active plans exist yet — <a href="{{ route('super-admin.plans.create') }}" class="underline">create one first</a>.</p>
        @else
            @php $currentPlanId = old('plan_id', $client->currentSubscription?->plan_id); @endphp
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4" id="plan_picker">
                @foreach ($plans as $plan)
                    <label data-flow="{{ $plan->kiosk_included ? 'kiosk' : 'waiter' }}" class="plan-option flex items-start gap-3 border border-gray-200 rounded-xl px-4 py-3 cursor-pointer hover:border-red-300 transition has-[:checked]:border-red-400 has-[:checked]:bg-red-50/50">
                        <input type="radio" name="plan_id" value="{{ $plan->id }}" required class="mt-0.5 w-4 h-4 text-red-600 focus:ring-red-500" @checked($currentPlanId == $plan->id)>
                        <span>
                            <span class="block text-sm font-medium text-gray-800">{{ $plan->name }} @if ($plan->is_featured)<span class="text-red-600">⭐</span>@endif</span>
                            <span class="block text-xs text-gray-400">
                                {{ $plan->kiosk_included ? ($plan->max_kiosks ?? 'Unlimited') . ' kiosk terminals' : $plan->max_waiter_users . ' waiter users' }}
                                · ₹{{ number_format($plan->monthly_price, 0) }}/mo
                            </span>
                        </span>
                    </label>
                @endforeach
            </div>

            @php $currentPlanType = old('plan_type', $client->currentSubscription?->plan_type ?? 'monthly'); @endphp
            <div class="flex gap-6 text-sm pt-4 border-t border-gray-50">
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="plan_type" value="monthly" required class="text-red-600 focus:ring-red-500" @checked($currentPlanType === 'monthly')>
                    Bill Monthly
                </label>
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="plan_type" value="yearly" class="text-red-600 focus:ring-red-500" @checked($currentPlanType === 'yearly')>
                    Bill Yearly
                </label>
            </div>
        @endif
    </div>

    <div class="fixed bottom-0 left-64 right-0 bg-white/90 backdrop-blur border-t border-gray-100 px-8 py-4 flex items-center gap-3">
        <button class="bg-red-600 hover:bg-red-500 text-white rounded-xl px-6 py-2.5 text-sm font-medium shadow-sm transition">Save Changes</button>
        <a href="{{ route('super-admin.clients.show', $client) }}" class="text-sm text-gray-500 hover:text-gray-700 px-4 py-2.5 transition">Cancel</a>
    </div>
</form>

<script>
    function toggleFlow() {
        const waiter = document.getElementById('flow_waiter').checked;
        document.getElementById('upi_wrap').classList.toggle('hidden', !waiter);

        const flow = waiter ? 'waiter' : 'kiosk';
        document.querySelectorAll('#plan_picker .plan-option').forEach((el) => {
            const matches = el.dataset.flow === flow;
            el.classList.toggle('hidden', !matches);
            const radio = el.querySelector('input[type="radio"]');
            if (!matches && radio.checked) radio.checked = false;
        });
    }
    document.addEventListener('DOMContentLoaded', toggleFlow);
</script>
@endsection