@extends('layouts.master')

@section('title', 'Register as Seller')

@section('content')
<div class="tw-bg-gray-50 tw-min-h-screen tw-py-8 lg:tw-py-12">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-9">
                
                <!-- Card -->
                <div class="tw-bg-white tw-rounded-2xl tw-shadow-xl tw-overflow-hidden tw-border-0" x-data="sellerRegistration()">
                    
                    <!-- Header -->
                    <div class="tw-bg-gradient-to-r tw-from-orange-600 tw-to-orange-500 tw-p-6 lg:tw-p-8 text-center text-white">
                        <h2 class="tw-font-bold tw-text-2xl lg:tw-text-3xl tw-mb-2">Become a Seller</h2>
                        <p class="tw-text-orange-100 tw-mb-0 tw-text-sm lg:tw-text-base">🚀 Start your selling journey — it takes only 2 minutes!</p>
                    </div>

                    <!-- Progress Steps -->
                    <div class="tw-px-6 lg:tw-px-10 tw-py-6 tw-border-b tw-border-gray-200">
                        <div class="tw-flex tw-justify-between tw-items-center tw-relative">
                            <!-- Progress Line -->
                            <div class="tw-absolute tw-top-5 tw-left-0 tw-right-0 tw-h-1 tw-bg-gray-200 tw-z-0"></div>
                            <div class="tw-absolute tw-top-5 tw-left-0 tw-h-1 tw-bg-orange-500 tw-z-0 tw-transition-all tw-duration-500" 
                                 :style="'width: ' + ((currentStep - 1) / 2 * 100) + '%'"></div>
                            
                            <!-- Step 1 -->
                            <div class="tw-flex tw-flex-col tw-items-center tw-z-10">
                                <div class="tw-w-10 tw-h-10 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-font-bold tw-text-sm tw-border-2 tw-transition-all tw-duration-300"
                                     :class="currentStep >= 1 ? 'tw-bg-orange-500 tw-border-orange-500 tw-text-white' : 'tw-bg-white tw-border-gray-300 tw-text-gray-400'">
                                    <span x-show="currentStep <= 1">1</span>
                                    <i class="bi bi-check-lg" x-show="currentStep > 1"></i>
                                </div>
                                <span class="tw-text-xs tw-font-bold tw-mt-2" :class="currentStep >= 1 ? 'tw-text-orange-600' : 'tw-text-gray-400'">Personal Info</span>
                            </div>
                            
                            <!-- Step 2 -->
                            <div class="tw-flex tw-flex-col tw-items-center tw-z-10">
                                <div class="tw-w-10 tw-h-10 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-font-bold tw-text-sm tw-border-2 tw-transition-all tw-duration-300"
                                     :class="currentStep >= 2 ? 'tw-bg-orange-500 tw-border-orange-500 tw-text-white' : 'tw-bg-white tw-border-gray-300 tw-text-gray-400'">
                                    <span x-show="currentStep <= 2">2</span>
                                    <i class="bi bi-check-lg" x-show="currentStep > 2"></i>
                                </div>
                                <span class="tw-text-xs tw-font-bold tw-mt-2" :class="currentStep >= 2 ? 'tw-text-orange-600' : 'tw-text-gray-400'">Business Details</span>
                            </div>
                            
                            <!-- Step 3 -->
                            <div class="tw-flex tw-flex-col tw-items-center tw-z-10">
                                <div class="tw-w-10 tw-h-10 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-font-bold tw-text-sm tw-border-2 tw-transition-all tw-duration-300"
                                     :class="currentStep >= 3 ? 'tw-bg-orange-500 tw-border-orange-500 tw-text-white' : 'tw-bg-white tw-border-gray-300 tw-text-gray-400'">
                                    3
                                </div>
                                <span class="tw-text-xs tw-font-bold tw-mt-2" :class="currentStep >= 3 ? 'tw-text-orange-600' : 'tw-text-gray-400'">KYC & Submit</span>
                            </div>
                        </div>
                    </div>

                    <div class="card-body tw-p-6 lg:tw-p-10">
                        
                        <!-- Form -->
                        <form method="POST" action="{{ route('register.seller') }}" enctype="multipart/form-data" id="sellerParams">
                            @csrf
                            @if(isset($planId))
                                <input type="hidden" name="plan_id" value="{{ $planId }}">
                            @endif
                            
                            <!-- ERROR ALERT -->
                            @if ($errors->any())
                                <div class="alert alert-danger border-0 shadow-sm mb-4 tw-rounded-lg">
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                        <span class="fw-bold">Please correct the following errors:</span>
                                    </div>
                                    <ul class="mb-0 small ps-3">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <!-- ==================== STEP 1: Personal Information ==================== -->
                            <div x-show="currentStep === 1" x-transition:enter="tw-transition tw-ease-out tw-duration-300" x-transition:enter-start="tw-opacity-0 tw-translate-x-4" x-transition:enter-end="tw-opacity-100 tw-translate-x-0">
                                <div class="tw-mb-6">
                                    <h4 class="tw-font-bold tw-text-xl tw-text-gray-800 tw-mb-1">Personal Information</h4>
                                    <p class="tw-text-gray-500 tw-text-sm">Enter your account details to get started</p>
                                </div>
                                
                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Full Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-lg tw-bg-gray-50 focus:tw-bg-white" name="name" required value="{{ old('name') }}" placeholder="Enter your full name">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Contact Number <span class="text-danger">*</span></label>
                                        <input type="tel" class="form-control form-control-lg tw-bg-gray-50 focus:tw-bg-white" name="mobile" required value="{{ old('mobile') }}" placeholder="e.g. 9876543210" maxlength="10">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Email Address <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control form-control-lg tw-bg-gray-50 focus:tw-bg-white" name="email" required value="{{ old('email') }}" placeholder="seller@example.com">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">City</label>
                                        <input type="text" class="form-control form-control-lg tw-bg-gray-50 focus:tw-bg-white" name="city" value="{{ old('city') }}" placeholder="e.g. Mumbai">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">State</label>
                                        <input type="text" class="form-control form-control-lg tw-bg-gray-50 focus:tw-bg-white" name="state" value="{{ old('state') }}" placeholder="e.g. Maharashtra">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Country</label>
                                        <select class="form-select form-select-lg tw-bg-gray-50 focus:tw-bg-white" name="country">
                                            <option value="">Select Country</option>
                                            @foreach(config('countries') as $country)
                                                <option value="{{ $country }}" {{ old('country', 'India') == $country ? 'selected' : '' }}>{{ $country }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Password <span class="text-danger">*</span></label>
                                        <div class="input-group input-group-lg">
                                            <input :type="showPassword ? 'text' : 'password'" class="form-control tw-bg-gray-50 focus:tw-bg-white" name="password" required minlength="8" placeholder="Min 8 characters" x-model="password" @input="checkPasswordStrength()">
                                            <button type="button" class="btn btn-light border" @click="showPassword = !showPassword" tabindex="-1">
                                                <i class="bi" :class="showPassword ? 'bi-eye-slash' : 'bi-eye'"></i>
                                            </button>
                                        </div>
                                        <div class="mt-2" x-show="password.length > 0">
                                            <div class="d-flex gap-1 mb-1">
                                                <div class="flex-fill rounded" style="height: 4px;" :class="passwordStrength >= 1 ? (passwordStrength === 1 ? 'bg-danger' : passwordStrength === 2 ? 'bg-warning' : 'bg-success') : 'bg-secondary'"></div>
                                                <div class="flex-fill rounded" style="height: 4px;" :class="passwordStrength >= 2 ? (passwordStrength === 2 ? 'bg-warning' : 'bg-success') : 'bg-secondary'"></div>
                                                <div class="flex-fill rounded" style="height: 4px;" :class="passwordStrength >= 3 ? 'bg-success' : 'bg-secondary'"></div>
                                            </div>
                                            <small :class="passwordStrength === 1 ? 'text-danger' : passwordStrength === 2 ? 'text-warning' : passwordStrength === 3 ? 'text-success' : 'text-muted'">
                                                <span x-show="passwordStrength === 1">🔴 Weak</span>
                                                <span x-show="passwordStrength === 2">🟡 Medium</span>
                                                <span x-show="passwordStrength === 3">🟢 Strong</span>
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Confirm Password <span class="text-danger">*</span></label>
                                        <div class="input-group input-group-lg">
                                            <input :type="showConfirmPassword ? 'text' : 'password'" class="form-control tw-bg-gray-50 focus:tw-bg-white" name="password_confirmation" required minlength="8" placeholder="Confirm password" x-model="confirmPassword">
                                            <button type="button" class="btn btn-light border" @click="showConfirmPassword = !showConfirmPassword" tabindex="-1">
                                                <i class="bi" :class="showConfirmPassword ? 'bi-eye-slash' : 'bi-eye'"></i>
                                            </button>
                                        </div>
                                        <div class="mt-2" x-show="confirmPassword.length > 0">
                                            <small :class="password === confirmPassword ? 'text-success' : 'text-danger'">
                                                <span x-show="password === confirmPassword">✅ Passwords match</span>
                                                <span x-show="password !== confirmPassword">❌ Passwords don't match</span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Step 1 Navigation -->
                                <div class="tw-flex tw-justify-end tw-mt-8">
                                    <button type="button" @click="nextStep()" class="btn btn-lg tw-bg-orange-600 tw-border-orange-600 tw-text-white tw-font-bold tw-px-8 tw-py-3 tw-rounded-lg shadow hover:tw-bg-orange-700 tw-transition-all">
                                        Next: Business Details <i class="bi bi-arrow-right ms-2"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- ==================== STEP 2: Company & Product Information ==================== -->
                            <div x-show="currentStep === 2" x-transition:enter="tw-transition tw-ease-out tw-duration-300" x-transition:enter-start="tw-opacity-0 tw-translate-x-4" x-transition:enter-end="tw-opacity-100 tw-translate-x-0">
                                <div class="tw-mb-6">
                                    <h4 class="tw-font-bold tw-text-xl tw-text-gray-800 tw-mb-1">Business Details</h4>
                                    <p class="tw-text-gray-500 tw-text-sm">Tell us about your company and first product</p>
                                    
                                    <!-- Delivery Notice -->
                                    <div class="alert alert-info border-0 shadow-sm mt-3 tw-bg-blue-50 tw-text-blue-800 tw-rounded-lg d-flex align-items-center">
                                        <i class="bi bi-truck me-3 tw-text-xl"></i>
                                        <div>
                                            <p class="mb-0 fw-bold">🚚 डिलीवरी की व्यवस्था विक्रेता द्वारा स्वयं की जाएगी</p>
                                            <p class="mb-0 small">(Seller handles delivery & logistics)</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Company Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-lg tw-bg-gray-50 focus:tw-bg-white" name="company_name" required value="{{ old('company_name') }}" placeholder="Your Company/Business Name">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Primary Category <span class="text-danger">*</span></label>
                                        <select class="form-select form-select-lg tw-bg-gray-50" name="category_id" required x-model="selectedCategory" @change="loadSubcategories()">
                                            <option value="">Select Category</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6" x-show="subcategories.length > 0">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Sub Category</label>
                                        <select class="form-select form-select-lg tw-bg-gray-50" name="subcategory_id" x-model="selectedSubcategory">
                                            <option value="">Select Sub Category</option>
                                            <template x-for="sub in subcategories" :key="sub.id">
                                                <option :value="sub.id" x-text="sub.name"></option>
                                            </template>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Custom Category <span class="text-muted fw-normal">(if not listed)</span></label>
                                        <input type="text" class="form-control form-control-lg tw-bg-gray-50" name="custom_category" value="{{ old('custom_category') }}" placeholder="e.g. Industrial Valves">
                                    </div>
                                    
                                    <!-- Business Type -->
                                    <div class="col-12">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600 mb-3">Business Type <span class="text-danger">*</span></label>
                                        <div class="row g-3">
                                            @php
                                                $businessTypes = [
                                                    'manufacturer' => ['icon' => 'bi-building-gear', 'label' => 'Manufacturer'],
                                                    'wholesaler' => ['icon' => 'bi-shop', 'label' => 'Wholesaler/Distributor'],
                                                    'trader' => ['icon' => 'bi-graph-up-arrow', 'label' => 'Trader'],
                                                    'exporter' => ['icon' => 'bi-globe', 'label' => 'Exporter'],
                                                ];
                                            @endphp
                                            @foreach($businessTypes as $value => $type)
                                                <div class="col-6 col-md-3">
                                                    <input type="checkbox" class="btn-check" id="bt_{{ $value }}" name="business_type[]" value="{{ $value }}" {{ in_array($value, old('business_type', [])) ? 'checked' : '' }}>
                                                    <label class="btn btn-outline-secondary w-100 tw-py-3 tw-rounded-lg" for="bt_{{ $value }}">
                                                        <i class="bi {{ $type['icon'] }} d-block tw-text-xl tw-mb-1"></i>
                                                        <span class="small">{{ $type['label'] }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <!-- MOQ -->
                                    <div class="col-md-4">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">MOQ <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control form-control-lg tw-bg-gray-50" name="moq_quantity" required value="{{ old('moq_quantity', $minMoq ?? 10) }}" min="{{ $minMoq ?? 10 }}" max="{{ $maxMoq ?? 150 }}">
                                        <small class="text-muted">Min: {{ $minMoq ?? 10 }}, Max: {{ $maxMoq ?? 150 }}</small>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Unit <span class="text-danger">*</span></label>
                                        <select class="form-select form-select-lg tw-bg-gray-50" name="unit" required>
                                            <option value="pcs" {{ old('unit') == 'pcs' ? 'selected' : '' }}>Pieces (pcs)</option>
                                            <option value="kg" {{ old('unit') == 'kg' ? 'selected' : '' }}>Kilograms (kg)</option>
                                            <option value="ltr" {{ old('unit') == 'ltr' ? 'selected' : '' }}>Liters (ltr)</option>
                                            <option value="box" {{ old('unit') == 'box' ? 'selected' : '' }}>Box</option>
                                            <option value="set" {{ old('unit') == 'set' ? 'selected' : '' }}>Set</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Pincode <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-lg tw-bg-gray-50" name="pincode" required value="{{ old('pincode') }}" placeholder="e.g. 400001" pattern="[0-9]{6}" maxlength="6">
                                    </div>

                                    <div class="col-12">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Business Address</label>
                                        <textarea class="form-control tw-bg-gray-50" name="address" rows="2" placeholder="Full business address">{{ old('address') }}</textarea>
                                    </div>

                                    <!-- Product Details -->
                                    <div class="col-12">
                                        <hr class="tw-my-4">
                                        <h6 class="tw-font-bold tw-text-gray-700 tw-mb-4"><i class="bi bi-box-seam me-2"></i>First Product Details</h6>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Product Name</label>
                                        <input type="text" class="form-control form-control-lg tw-bg-gray-50" name="product_name" value="{{ old('product_name') }}" placeholder="e.g. Industrial Ball Valve">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Price per Unit <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <select class="form-select form-select-lg tw-bg-gray-50 bg-light" name="currency" style="max-width: 110px;">
                                                <option value="INR" {{ old('currency') == 'INR' ? 'selected' : '' }}>₹ INR</option>
                                                <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>$ USD</option>
                                            </select>
                                            <input type="number" class="form-control form-control-lg tw-bg-gray-50" name="product_price" required value="{{ old('product_price') }}" placeholder="e.g. 500" min="0" step="0.01">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Product Description</label>
                                        <textarea class="form-control tw-bg-gray-50" name="product_description" rows="3" placeholder="Describe your product features, specifications, etc.">{{ old('product_description') }}</textarea>
                                    </div>

                                    <!-- Product Images -->
                                    <div class="col-12">
                                        <label class="form-label tw-font-bold tw-text-gray-700">Product Images <span class="text-danger">*</span> <span class="text-muted fw-normal small">(Min 1, Max 4)</span></label>
                                        <div class="row g-3">
                                            @for($i = 0; $i < 4; $i++)
                                                <div class="col-6 col-md-3">
                                                    <div class="tw-relative tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-xl tw-aspect-square tw-flex tw-items-center tw-justify-center hover:tw-border-orange-400 tw-transition-colors tw-bg-gray-50 tw-overflow-hidden">
                                                        <template x-if="images[{{ $i }}]">
                                                            <img :src="images[{{ $i }}]" class="tw-w-full tw-h-full tw-object-cover">
                                                        </template>
                                                        <template x-if="!images[{{ $i }}]">
                                                            <div class="text-center tw-p-2">
                                                                <i class="bi bi-image tw-text-2xl tw-text-gray-400"></i>
                                                                <p class="tw-text-xs tw-text-gray-500 tw-mb-0 tw-mt-1">{{ $i === 0 ? 'Main' : 'Optional' }}</p>
                                                            </div>
                                                        </template>
                                                        <input type="file" name="product_images[]" class="tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer" accept="image/*" @change="previewImage($event, {{ $i }})" {{ $i === 0 ? 'required' : '' }}>
                                                    </div>
                                                </div>
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Step 2 Navigation -->
                                <div class="d-flex flex-column flex-md-row justify-content-between gap-3 tw-mt-8">
                                    <button type="button" @click="prevStep()" class="btn btn-lg btn-outline-secondary tw-px-6 tw-py-3 tw-rounded-lg order-2 order-md-1">
                                        <i class="bi bi-arrow-left me-2"></i> Back
                                    </button>
                                    <button type="button" @click="nextStep()" class="btn btn-lg tw-bg-orange-600 tw-border-orange-600 tw-text-white tw-font-bold tw-px-8 tw-py-3 tw-rounded-lg shadow hover:tw-bg-orange-700 tw-transition-all order-1 order-md-2">
                                        Next: KYC & Submit <i class="bi bi-arrow-right ms-2"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- ==================== STEP 3: KYC Verification & Submit ==================== -->
                            <div x-show="currentStep === 3" x-transition:enter="tw-transition tw-ease-out tw-duration-300" x-transition:enter-start="tw-opacity-0 tw-translate-x-4" x-transition:enter-end="tw-opacity-100 tw-translate-x-0">
                                <div class="tw-mb-6">
                                    <h4 class="tw-font-bold tw-text-xl tw-text-gray-800 tw-mb-1">KYC Verification</h4>
                                    <p class="tw-text-gray-500 tw-text-sm">Submit KYC documents for verification</p>
                                </div>
                                
                                <!-- KYC Toggle Card -->
                                <div class="tw-bg-white tw-border-2 tw-rounded-xl tw-p-5 tw-mb-6 tw-cursor-pointer tw-transition-all tw-shadow-sm hover:tw-shadow-md"
                                     @click="submitKyc = !submitKyc"
                                     :class="submitKyc ? 'tw-border-orange-500 tw-ring-2 tw-ring-orange-200 tw-bg-orange-50' : 'tw-border-gray-300 hover:tw-border-orange-400'">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center gap-4">
                                            <!-- icon -->
                                            <div class="tw-w-14 tw-h-14 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-2xl tw-transition-colors tw-shadow-sm"
                                                 :class="submitKyc ? 'tw-bg-gradient-to-br tw-from-orange-500 tw-to-orange-600 tw-text-white' : 'tw-bg-gray-100 tw-text-gray-400'">
                                                <i class="bi" :class="submitKyc ? 'bi-shield-fill-check' : 'bi-shield-lock'"></i>
                                            </div>
                                            <!-- content -->
                                            <div>
                                                <h5 class="fw-bold mb-1 tw-text-lg" :class="submitKyc ? 'tw-text-orange-800' : 'tw-text-gray-800'">
                                                    Submit KYC & Get Verified
                                                    <span x-show="!submitKyc" class="badge bg-light text-dark border ms-2 fw-normal">Optional</span>
                                                    <span x-show="submitKyc" class="badge bg-orange-100 text-orange-700 border border-orange-200 ms-2">Active</span>
                                                </h5>
                                                <p class="mb-0 small" :class="submitKyc ? 'tw-text-orange-700' : 'tw-text-gray-500'">
                                                    <span x-show="!submitKyc">Want a <i class="bi bi-patch-check-fill tw-text-orange-500"></i> KYC Submitted Tag? Click to upload documents now.</span>
                                                    <span x-show="submitKyc">Great! Upload documents below to unlock full seller benefits.</span>
                                                </p>
                                            </div>
                                        </div>
                                        <!-- toggle -->
                                        <div class="form-check form-switch pointer-events-none ms-3">
                                            <input class="form-check-input tw-scale-150" type="checkbox" role="switch" x-model="submitKyc">
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="submit_kyc" :value="submitKyc ? 1 : 0">

                                <div x-show="!submitKyc" x-transition class="alert alert-light border shadow-sm mb-4">
                                    <i class="bi bi-info-circle me-2 text-primary"></i>
                                    You can skip KYC for now and submit it later from your dashboard.
                                </div>

                                <div x-show="submitKyc" x-transition:enter="tw-transition tw-ease-out tw-duration-300" x-transition:enter-start="tw-opacity-0 tw-translate-y-4" x-transition:enter-end="tw-opacity-100 tw-translate-y-0">
                                    <div class="alert alert-warning border-0 tw-bg-orange-50 tw-text-orange-800 tw-rounded-lg mb-4">
                                        <i class="bi bi-shield-exclamation me-2"></i>
                                        <strong>Required:</strong> PAN Number, PAN Card, and Your Photo are <strong>mandatory</strong> for KYC verification.
                                    </div>

                                    <!-- MANDATORY SECTION -->
                                    <div class="tw-border-2 tw-border-orange-200 tw-rounded-xl tw-p-5 tw-bg-orange-50 tw-mb-6">
                                        <h6 class="tw-font-bold tw-text-gray-800 tw-mb-4 tw-flex tw-items-center">
                                            <i class="bi bi-shield-check tw-text-orange-600 me-2"></i>
                                            Required for Verification
                                            <span class="badge bg-danger ms-2 small">Mandatory</span>
                                        </h6>
                                        
                                        <div class="row g-4">
                                            <!-- Seller Photo -->
                                            <div class="col-md-4">
                                                <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Your Photo <span class="text-danger">*</span></label>
                                                <div class="tw-relative tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-xl tw-aspect-square tw-flex tw-items-center tw-justify-center hover:tw-border-orange-400 tw-transition-colors tw-bg-white tw-overflow-hidden">
                                                    <template x-if="sellerPhoto">
                                                        <img :src="sellerPhoto" class="tw-w-full tw-h-full tw-object-cover">
                                                    </template>
                                                    <template x-if="!sellerPhoto">
                                                        <div class="text-center tw-p-3">
                                                            <i class="bi bi-person-bounding-box tw-text-4xl tw-text-gray-400"></i>
                                                            <p class="tw-text-xs tw-text-gray-500 tw-mb-0 tw-mt-2">Click to upload</p>
                                                            <p class="tw-text-xs tw-text-orange-600 tw-font-bold">Required</p>
                                                        </div>
                                                    </template>
                                                    <input type="file" name="seller_photo" class="tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer" accept="image/*" @change="previewSellerPhoto($event)" :required="submitKyc">
                                                </div>
                                                <small class="text-muted">Clear face photo for KYC</small>
                                            </div>
                                            
                                            <!-- PAN Details -->
                                            <div class="col-md-8">
                                                <div class="row g-3">
                                                    <div class="col-12">
                                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">PAN Number <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control form-control-lg tw-bg-white" name="pan_number" placeholder="ABCDE1234F" value="{{ old('pan_number') }}" maxlength="10" style="text-transform: uppercase;" :required="submitKyc" pattern="[A-Z]{5}[0-9]{4}[A-Z]{1}">
                                                        <small class="text-muted">Format: 5 letters + 4 digits + 1 letter (e.g., ABCDE1234F)</small>
                                                    </div>
                                                    <div class="col-12">
                                                        <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">PAN Card Image <span class="text-danger">*</span></label>
                                                        <div class="tw-relative tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-xl tw-p-4 hover:tw-border-orange-400 tw-transition-colors tw-bg-white">
                                                            <template x-if="panCardImage">
                                                                <div class="d-flex align-items-center gap-3">
                                                                    <img :src="panCardImage" class="tw-w-20 tw-h-14 tw-object-cover tw-rounded tw-border">
                                                                    <div class="flex-grow-1">
                                                                        <p class="mb-0 tw-font-bold tw-text-green-700"><i class="bi bi-check-circle-fill me-1"></i>PAN Card Uploaded</p>
                                                                        <small class="text-muted">Click to change</small>
                                                                    </div>
                                                                </div>
                                                            </template>
                                                            <template x-if="!panCardImage">
                                                                <div class="d-flex align-items-center gap-3">
                                                                    <div class="tw-w-14 tw-h-14 tw-bg-gray-100 tw-rounded tw-flex tw-items-center tw-justify-center">
                                                                        <i class="bi bi-credit-card-2-front tw-text-2xl tw-text-gray-400"></i>
                                                                    </div>
                                                                    <div>
                                                                        <p class="mb-0 tw-text-sm"><span class="tw-text-orange-600 tw-font-bold">Upload PAN Card</span> (front side)</p>
                                                                        <small class="text-muted">JPG, PNG or PDF (Max 5MB)</small>
                                                                    </div>
                                                                </div>
                                                            </template>
                                                            <input type="file" name="pan_card_doc" class="tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer" accept=".jpg,.jpeg,.png,.pdf" @change="previewPanCard($event)" :required="submitKyc">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- OPTIONAL SECTION -->
                                <div class="tw-border tw-border-gray-200 tw-rounded-xl tw-p-5 tw-bg-gray-50 tw-mb-4">
                                    <h6 class="tw-font-bold tw-text-gray-700 tw-mb-4 tw-flex tw-items-center">
                                        <i class="bi bi-file-earmark-text tw-text-gray-500 me-2"></i>
                                        Additional Documents
                                    </h6>
                                    
                                    <div class="row g-4">
                                        <div class="col-md-6">
                                            <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">GST Number</label>
                                            <input type="text" class="form-control form-control-lg tw-bg-white" name="gst_number" placeholder="22AAAAA0000A1Z5" value="{{ old('gst_number') }}" maxlength="15" style="text-transform: uppercase;" x-model="gstNumber">
                                            <small class="text-muted">15 character GSTIN</small>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">Udyam Registration No.</label>
                                            <input type="text" class="form-control form-control-lg tw-bg-white" name="udyam_number" placeholder="UDYAM-XX-00-0000000" value="{{ old('udyam_number') }}" style="text-transform: uppercase;" x-model="udyamNumber">
                                            <small class="text-muted">For MSME registered businesses</small>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label tw-font-bold tw-text-sm tw-text-gray-600">IEC Code <span class="text-muted fw-normal">(for exporters)</span></label>
                                            <input type="text" class="form-control form-control-lg tw-bg-white" name="iec_code" placeholder="0123456789" value="{{ old('iec_code') }}" maxlength="10" x-model="iecCode">
                                            <small class="text-muted">Import Export Code</small>
                                        </div>
                                    </div>
                                </div>

                                    
                                    <!-- Document Upload -->
                                    <div class="col-12">
                                        <label class="form-label tw-font-bold tw-text-gray-700">Upload Documents</label>
                                        
                                        <template x-for="(doc, index) in kycDocuments" :key="index">
                                            <div class="tw-border tw-border-green-400 tw-rounded-lg tw-p-3 tw-bg-green-50 mb-2">
                                                <div class="d-flex align-items-center gap-3">
                                                    <div class="tw-flex-shrink-0">
                                                        <template x-if="doc.type === 'image'">
                                                            <img :src="doc.preview" class="tw-w-12 tw-h-12 tw-object-cover tw-rounded tw-border">
                                                        </template>
                                                        <template x-if="doc.type === 'pdf'">
                                                            <div class="tw-w-12 tw-h-12 tw-bg-red-100 tw-rounded tw-flex tw-items-center tw-justify-center">
                                                                <i class="bi bi-file-earmark-pdf tw-text-xl tw-text-red-600"></i>
                                                            </div>
                                                        </template>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <p class="mb-0 fw-medium tw-text-green-800" x-text="doc.name"></p>
                                                        <small class="tw-text-green-600" x-text="doc.size"></small>
                                                    </div>
                                                    <button type="button" class="btn btn-sm btn-outline-danger" @click="removeKycDoc(index)">
                                                        <i class="bi bi-x-lg"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </template>
                                        
                                        <div class="tw-relative tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-xl tw-p-5 text-center hover:tw-border-orange-400 tw-transition-colors tw-bg-light">
                                            <i class="bi bi-cloud-upload tw-text-3xl tw-text-gray-400 mb-2"></i>
                                            <p class="mb-1 tw-text-sm tw-text-gray-600">
                                                <span x-show="kycDocuments.length === 0">Drop files or <span class="tw-text-orange-600 tw-font-bold">browse</span></span>
                                                <span x-show="kycDocuments.length > 0" class="tw-text-orange-600 tw-font-bold">+ Add more</span>
                                            </p>
                                            <span class="d-block tw-text-xs tw-text-gray-400">JPEG, PNG, PDF (Max 5MB)</span>
                                            <input type="file" name="kyc_documents[]" class="tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer" accept=".jpg,.jpeg,.png,.pdf" @change="addKycDoc($event)" multiple>
                                        </div>
                                    </div>
                                </div>

                                <!-- Declaration & Submit -->
                                <div class="tw-border tw-border-gray-200 tw-rounded-xl tw-p-5 tw-bg-gray-50 tw-mt-6">
                                    <div class="form-check mb-4">
                                        <input class="form-check-input" type="checkbox" id="declaration" name="declaration" required>
                                        <label class="form-check-label tw-text-sm tw-text-gray-600" for="declaration">
                                            I declare that the information provided is true and correct. I agree to the <a href="/terms" target="_blank" class="tw-text-orange-600">Terms & Conditions</a>.
                                        </label>
                                    </div>
                                </div>
                                
                                <!-- Step 3 Navigation -->
                                <div class="d-flex flex-column flex-md-row justify-content-between gap-3 tw-mt-8">
                                    <button type="button" @click="prevStep()" class="btn btn-lg btn-outline-secondary tw-px-6 tw-py-3 tw-rounded-lg order-2 order-md-1">
                                        <i class="bi bi-arrow-left me-2"></i> Back
                                    </button>
                                    <button type="button" @click="validateKycSubmission()" class="btn btn-lg tw-bg-orange-600 tw-border-orange-600 tw-text-white tw-font-bold tw-px-8 tw-py-3 tw-rounded-lg shadow-lg hover:tw-bg-orange-700 tw-transition-all order-1 order-md-2" :disabled="isSubmitting">
                                        <span x-show="isSubmitting"><i class="bi bi-arrow-repeat tw-animate-spin me-2"></i> Processing...</span>
                                        <span x-show="!isSubmitting"><i class="bi bi-check-circle-fill me-2"></i> Complete Registration</span>
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                
                <p class="text-center text-muted mt-4">Already have an account? <a href="{{ route('login') }}" class="tw-text-orange-600 tw-font-bold tw-no-underline hover:tw-underline">Login Here</a></p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="//unpkg.com/alpinejs" defer></script>
<script>
    function sellerRegistration() {
        return {
            currentStep: 1,
            images: {},
            selectedCategory: '{{ old("category_id", "") }}',
            selectedSubcategory: '{{ old("subcategory_id", "") }}',
            subcategories: [],
            password: '',
            confirmPassword: '',
            showPassword: false,
            showConfirmPassword: false,
            passwordStrength: 0,
            kycDocuments: [],
            sellerPhoto: null,
            panCardImage: null,
            submitKyc: false,
            isSubmitting: false,
            
            // Optional Field Models (to check for content)
            gstNumber: '{{ old('gst_number') }}',
            udyamNumber: '{{ old('udyam_number') }}',
            iecCode: '{{ old('iec_code') }}',

            init() {
                if (this.selectedCategory) {
                    this.loadSubcategories();
                }
            },

            validateKycSubmission() {
                // If KYC Toggle is ON, just submit (native validation will handle required fields)
                if (this.submitKyc) {
                    this.submitForm();
                    return;
                }

                // If KYC Toggle is OFF, check if any optional fields have data
                const hasOptionalData = this.gstNumber || this.udyamNumber || this.iecCode || this.kycDocuments.length > 0;

                if (hasOptionalData) {
                    // Alert User: Partial Submission Blocked
                    if (confirm("⚠️ Partial KYC Not Allowed!\n\nYou have uploaded Optional Documents (GST, Udyam, etc.) but skipped the Mandatory Section (PAN/Photo).\n\n• To Submit Documents: Click 'OK' to enable Mandatory KYC fields.\n• To Skip KYC: Click 'Cancel' to clear optional fields and proceed.")) {
                        // User chose to Enable KYC
                        this.submitKyc = true;
                        // Scroll to top of KYC section
                        setTimeout(() => {
                            const kycSection = document.querySelector('.tw-bg-orange-50.tw-border-orange-200'); // Toggle card selector approximation
                            if(kycSection) kycSection.scrollIntoView({behavior: 'smooth', block: 'center'});
                        }, 100);
                    } else {
                        // User chose to Skip KYC -> Clear fields
                        this.gstNumber = '';
                        this.udyamNumber = '';
                        this.iecCode = '';
                        this.kycDocuments = [];
                        // Clear file inputs manually if needed, though x-model binding isn't on file inputs directly for text fields it works.
                        // For file inputs, we clear the kycDocuments array which drives the view.
                        // We should also proceed to submit? Or let user review?
                        // User expectation "skip kar dey" -> Proceed to submit without docs.
                        this.submitForm(); 
                    }
                } else {
                    // No optional data, Toggle is OFF -> Clean Skip -> Submit
                    this.submitForm();
                }
            },

            submitForm() {
                this.isSubmitting = true;
                document.getElementById('sellerParams').submit();
            },
            
            nextStep() {
                if (this.currentStep < 3) {
                    this.currentStep++;
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            },
            
            prevStep() {
                if (this.currentStep > 1) {
                    this.currentStep--;
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            },
            
            checkPasswordStrength() {
                let strength = 0;
                const pwd = this.password;
                if (pwd.length >= 8) strength++;
                if (/[0-9]/.test(pwd)) strength++;
                if (/[^a-zA-Z0-9]/.test(pwd)) strength++;
                if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) strength++;
                this.passwordStrength = Math.min(strength, 3);
                if (strength === 0 && pwd.length > 0) this.passwordStrength = 1;
            },
            
            previewImage(event, index) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.images[index] = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            },
            
            previewSellerPhoto(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.sellerPhoto = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            },
            
            previewPanCard(event) {
                const file = event.target.files[0];
                if (file) {
                    if (file.type === 'application/pdf') {
                        this.panCardImage = 'pdf';
                    } else {
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            this.panCardImage = e.target.result;
                        };
                        reader.readAsDataURL(file);
                    }
                }
            },
            
            addKycDoc(event) {
                const files = event.target.files;
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    const sizeKB = (file.size / 1024).toFixed(1);
                    const sizeStr = sizeKB > 1024 ? (sizeKB / 1024).toFixed(1) + ' MB' : sizeKB + ' KB';
                    const isPdf = file.type === 'application/pdf';
                    
                    const docObj = {
                        name: file.name,
                        size: sizeStr,
                        type: isPdf ? 'pdf' : 'image',
                        preview: ''
                    };
                    
                    if (!isPdf) {
                        const reader = new FileReader();
                        const idx = this.kycDocuments.length;
                        reader.onload = (e) => {
                            this.kycDocuments[idx].preview = e.target.result;
                        };
                        reader.readAsDataURL(file);
                    }
                    this.kycDocuments.push(docObj);
                }
                event.target.value = '';
            },
            
            removeKycDoc(index) {
                this.kycDocuments.splice(index, 1);
            },
            
            async loadSubcategories() {
                if (!this.selectedCategory) {
                    this.subcategories = [];
                    return;
                }
                try {
                    const response = await fetch(`/api/categories/${this.selectedCategory}/children`);
                    if (response.ok) {
                        this.subcategories = await response.json();
                    }
                } catch (e) {
                    console.error('Failed to load subcategories', e);
                }
            }
        }
    }
</script>
@endpush