@extends('admin.layouts.app')
@section('title', 'Customize Checkout')

@section('content')
@php
$b = $settings['branding'] ?? [];
$c = $settings['checkout'] ?? [];
$o = $settings['otp'] ?? [];
$primaryColor = $b['primary_color'] ?? '#111111';
$buttonColor  = $b['button_color']  ?? '#111111';
$shopName     = $b['shop_name']     ?? ($shop->name ?? 'Your Store');
$logoUrl      = $b['logo_url']      ?? '';
$showCoupon   = $c['show_coupon']   ?? true;
$showDetails  = $c['show_details_step'] ?? true;
$welcomeMsg   = $c['welcome_message'] ?? 'Fast & Secure Checkout';
$successMsg   = $c['success_message'] ?? 'Your order has been placed!';
$otpTemplate  = $o['message_template'] ?? 'Your OTP is {otp}. Valid for 5 minutes.';
@endphp

<div class="flex flex-col xl:flex-row gap-6" x-data="{
    primaryColor: '{{ $primaryColor }}',
    buttonColor:  '{{ $buttonColor }}',
    shopName:     '{{ addslashes($shopName) }}',
    logoUrl:      '{{ addslashes($logoUrl) }}',
    showCoupon:   {{ $showCoupon ? 'true' : 'false' }},
    showDetails:  {{ $showDetails ? 'true' : 'false' }},
    welcomeMsg:   '{{ addslashes($welcomeMsg) }}',
    activeTab:    'branding'
}">

    {{-- LEFT: Settings Form --}}
    <div class="flex-1 space-y-5">
        <form method="POST" action="{{ route('admin.customize.update') }}">
            @csrf

            {{-- Tab Navigation --}}
            <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
                <div class="flex border-b border-slate-200">
                    @foreach(['branding' => '🎨 Branding', 'checkout' => '🛒 Checkout', 'otp' => '📱 OTP'] as $tab => $label)
                    <button type="button" @click="activeTab = '{{ $tab }}'"
                        :class="activeTab === '{{ $tab }}' ? 'border-b-2 border-indigo-600 text-indigo-600 bg-indigo-50/50' : 'text-slate-500 hover:text-slate-700'"
                        class="flex-1 px-4 py-3 text-sm font-medium transition-colors">
                        {{ $label }}
                    </button>
                    @endforeach
                </div>

                {{-- BRANDING TAB --}}
                <div x-show="activeTab === 'branding'" class="p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Store Name</label>
                        <input type="text" name="branding[shop_name]" value="{{ $shopName }}"
                            x-model="shopName"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Logo URL</label>
                        <input type="url" name="branding[logo_url]" value="{{ $logoUrl }}"
                            x-model="logoUrl"
                            placeholder="https://cdn.yourstore.com/logo.png"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <p class="text-xs text-slate-400 mt-1">Shown at the top of the checkout modal. Recommended: 200×40px PNG.</p>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">Primary Color</label>
                            <div class="flex items-center gap-2">
                                <input type="color" name="branding[primary_color]" value="{{ $primaryColor }}"
                                    x-model="primaryColor"
                                    class="w-10 h-10 border border-slate-300 rounded-lg cursor-pointer">
                                <input type="text" :value="primaryColor" readonly
                                    class="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm bg-slate-50 font-mono">
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Used for breadcrumb active + card borders</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">Button Color</label>
                            <div class="flex items-center gap-2">
                                <input type="color" name="branding[button_color]" value="{{ $buttonColor }}"
                                    x-model="buttonColor"
                                    class="w-10 h-10 border border-slate-300 rounded-lg cursor-pointer">
                                <input type="text" :value="buttonColor" readonly
                                    class="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm bg-slate-50 font-mono">
                            </div>
                            <p class="text-xs text-slate-400 mt-1">CTA buttons: Send OTP, Pay Now, etc.</p>
                        </div>
                    </div>
                </div>

                {{-- CHECKOUT TAB --}}
                <div x-show="activeTab === 'checkout'" class="p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Welcome Message</label>
                        <input type="text" name="checkout[welcome_message]" value="{{ $welcomeMsg }}"
                            x-model="welcomeMsg"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <p class="text-xs text-slate-400 mt-1">Shown on the OTP login step.</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Success Message</label>
                        <input type="text" name="checkout[success_message]" value="{{ $successMsg }}"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <div class="space-y-3">
                        <label class="block text-sm font-medium text-slate-700">Checkout Steps</label>
                        <label class="flex items-center justify-between p-3 border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50">
                            <div>
                                <div class="text-sm font-medium text-slate-700">Show Details Step</div>
                                <div class="text-xs text-slate-400">Collect name + email after OTP (skip if already known)</div>
                            </div>
                            <div class="relative" x-data>
                                <input type="hidden" name="checkout[show_details_step]" value="0">
                                <input type="checkbox" name="checkout[show_details_step]" value="1"
                                    x-model="showDetails"
                                    {{ $showDetails ? 'checked' : '' }}
                                    class="sr-only peer">
                                <div @click="showDetails = !showDetails"
                                    :class="showDetails ? 'bg-indigo-600' : 'bg-slate-200'"
                                    class="w-11 h-6 rounded-full transition-colors cursor-pointer relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-transform"
                                    :style="showDetails ? 'padding-left: 20px' : ''">
                                </div>
                            </div>
                        </label>

                        <label class="flex items-center justify-between p-3 border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50">
                            <div>
                                <div class="text-sm font-medium text-slate-700">Show Coupon Field</div>
                                <div class="text-xs text-slate-400">Allow customers to apply discount coupons at payment</div>
                            </div>
                            <div class="relative" x-data>
                                <input type="hidden" name="checkout[show_coupon]" value="0">
                                <input type="checkbox" name="checkout[show_coupon]" value="1"
                                    x-model="showCoupon"
                                    {{ $showCoupon ? 'checked' : '' }}
                                    class="sr-only">
                                <div @click="showCoupon = !showCoupon"
                                    :class="showCoupon ? 'bg-indigo-600' : 'bg-slate-200'"
                                    class="w-11 h-6 rounded-full transition-colors cursor-pointer relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-transform"
                                    :style="showCoupon ? 'padding-left: 20px' : ''">
                                </div>
                            </div>
                        </label>
                    </div>
                </div>

                {{-- OTP TAB --}}
                <div x-show="activeTab === 'otp'" class="p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">OTP SMS Template</label>
                        <textarea name="otp[message_template]" rows="3"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none">{{ $otpTemplate }}</textarea>
                        <p class="text-xs text-slate-400 mt-1">Use <code class="bg-slate-100 px-1 rounded">{otp}</code> as placeholder for the 6-digit code.</p>
                    </div>
                </div>
            </div>

            <button type="submit"
                class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl text-sm transition-colors">
                Save Customization
            </button>
        </form>
    </div>

    {{-- RIGHT: Live Preview --}}
    <div class="w-full xl:w-80 flex-shrink-0">
        <div class="sticky top-0">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Live Preview</p>
            <div class="bg-black/60 rounded-2xl p-3">
                {{-- Mock modal --}}
                <div class="bg-white rounded-xl overflow-hidden shadow-2xl" style="font-family: sans-serif;">
                    {{-- Handle --}}
                    <div class="flex justify-center pt-3 pb-1">
                        <div class="w-10 h-1 bg-slate-200 rounded-full"></div>
                    </div>

                    {{-- Breadcrumb --}}
                    <div class="px-5 py-2 flex items-center gap-1 text-xs" :style="`color: ${primaryColor}`">
                        <span class="font-semibold" :style="`color: ${primaryColor}`">OTP</span>
                        <span class="text-slate-300 mx-1">›</span>
                        <span class="text-slate-400">Address</span>
                        <span class="text-slate-300 mx-1">›</span>
                        <span class="text-slate-400">Shipping</span>
                        <span class="text-slate-300 mx-1">›</span>
                        <span class="text-slate-400">Payment</span>
                    </div>

                    <div class="px-5 pb-5">
                        {{-- Logo or name --}}
                        <div class="mb-3">
                            <template x-if="logoUrl">
                                <img :src="logoUrl" alt="logo" class="h-7 object-contain">
                            </template>
                            <template x-if="!logoUrl">
                                <span class="text-xs font-semibold text-slate-500" x-text="shopName"></span>
                            </template>
                        </div>

                        <h2 class="text-base font-bold text-slate-800 mb-1" x-text="welcomeMsg"></h2>
                        <p class="text-xs text-slate-500 mb-4">Enter your mobile number to receive an OTP</p>

                        <div class="flex gap-2 mb-3">
                            <span class="bg-slate-100 px-3 py-2 rounded-lg text-xs font-semibold text-slate-600">+91</span>
                            <div class="flex-1 h-9 bg-slate-50 border border-slate-200 rounded-lg"></div>
                        </div>

                        <div class="w-full py-2.5 rounded-lg text-white text-xs font-bold text-center transition-colors"
                            :style="`background-color: ${buttonColor}`">
                            Send OTP
                        </div>

                        <template x-if="showCoupon">
                            <div class="mt-3 flex gap-1">
                                <div class="flex-1 h-8 border border-dashed border-slate-300 rounded-lg flex items-center px-2">
                                    <span class="text-xs text-slate-300">Coupon code</span>
                                </div>
                                <div class="px-3 py-1.5 bg-slate-800 rounded-lg text-white text-xs">Apply</div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <p class="text-center text-xs text-slate-400 mt-3">Changes update the preview live</p>
        </div>
    </div>

</div>
@endsection