@extends('front.layout.master')
@section('title', __('staticwords.ApplyForSeller') . ' - ' . ($title ?? config('app.name')))

@section('body')

<section class="max-w-3xl mx-auto px-4 lg:px-6 pt-6 pb-12">

    {{-- Heading --}}
    <div class="text-center mb-6">
        <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-brand-100 text-brand-600 mb-3">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7h18l-2 13H5L3 7z"/><path d="M8 7V5a4 4 0 0 1 8 0v2"/></svg>
        </div>
        <h1 class="font-display font-extrabold text-2xl lg:text-3xl text-deep">{{ __('staticwords.ApplyForSeller') }}</h1>
        <p class="text-slate-500 text-[14px] mt-1">{{ __('Set up your seller account in 4 quick steps.') }}</p>
    </div>

    {{-- Progress steps --}}
    <ol class="grid grid-cols-4 gap-2 mb-6" id="seller-progress">
        <li data-step="1" class="text-center">
            <div class="step-dot mx-auto w-8 h-8 rounded-full grid place-items-center text-[12px] font-bold bg-brand-500 text-white">1</div>
            <div class="mt-1.5 text-[11px] font-semibold text-deep">{{ __('staticwords.Agreement') }}</div>
        </li>
        <li data-step="2" class="text-center">
            <div class="step-dot mx-auto w-8 h-8 rounded-full grid place-items-center text-[12px] font-bold bg-slate-200 text-slate-500">2</div>
            <div class="mt-1.5 text-[11px] font-semibold text-slate-500">{{ __('staticwords.StoreInformation') }}</div>
        </li>
        <li data-step="3" class="text-center">
            <div class="step-dot mx-auto w-8 h-8 rounded-full grid place-items-center text-[12px] font-bold bg-slate-200 text-slate-500">3</div>
            <div class="mt-1.5 text-[11px] font-semibold text-slate-500">{{ __('staticwords.PaymentDetails') }}</div>
        </li>
        <li data-step="4" class="text-center">
            <div class="step-dot mx-auto w-8 h-8 rounded-full grid place-items-center text-[12px] font-bold bg-slate-200 text-slate-500">4</div>
            <div class="mt-1.5 text-[11px] font-semibold text-slate-500">{{ __('staticwords.Submit') }}</div>
        </li>
    </ol>

    @if($errors->any())
    <div class="mb-4 bg-rose-50 border border-rose-200 text-rose-700 text-[13px] rounded-xl p-3">
        <ul class="list-disc pl-5 space-y-1">
            @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
        </ul>
    </div>
    @endif

    <form id="sellerform" method="POST" enctype="multipart/form-data" action="{{ route('apply.seller.store') }}" class="bg-white rounded-2xl shadow-card border border-slate-100 overflow-hidden">
        @csrf

        {{-- Step 1: Agreement --}}
        <fieldset class="seller-step p-6" data-step="1">
            <h2 class="font-display font-extrabold text-lg text-deep">
                {{ isset($sellerterm) ? $sellerterm->title : __('staticwords.Agreement') }}
            </h2>
            <p class="text-[13px] text-slate-500 mt-1">{{ __('staticwords.SellerAgreement') }}</p>

            <div class="mt-4 max-h-72 overflow-y-auto bg-slate-50 border border-slate-200 rounded-xl p-4 text-[13px] text-slate-700 leading-relaxed prose prose-sm max-w-none">
                {!! $sellerterm->description ?? '' !!}
            </div>

            <label class="flex items-start gap-2 mt-4 cursor-pointer">
                <input {{ old('eula') ? 'checked' : '' }} required type="checkbox" name="eula" class="mt-1 w-4 h-4 rounded border-2 border-slate-300 text-brand-500 focus:ring-brand-500">
                <span class="text-[13px] font-semibold text-deep">{{ __('staticwords.IAgree') }}</span>
            </label>

            <div class="flex justify-end mt-6">
                <button type="button" data-action="next" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-2.5 rounded-full text-[14px] flex items-center gap-2">
                    {{ __('Next') }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </button>
            </div>
        </fieldset>

        {{-- Step 2: Store Information --}}
        <fieldset class="seller-step p-6 hidden" data-step="2">
            <h2 class="font-display font-extrabold text-lg text-deep">{{ __('staticwords.StoreInformation') }}</h2>
            <p class="text-[13px] text-slate-500 mt-1">{{ __('staticwords.TellAboutStore') }}</p>

            <div class="grid sm:grid-cols-2 gap-4 mt-5">
                <div class="sm:col-span-2">
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.StoreName') }} <span class="text-rose-500">*</span></label>
                    <input required type="text" name="name" value="{{ old('name') }}" placeholder="{{ __('staticwords.Pleaseenterstorename') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                </div>
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.Email') }} <span class="text-rose-500">*</span></label>
                    <input required type="email" name="email" value="{{ old('email') }}" placeholder="{{ __('staticwords.eaddress') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                </div>
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.MobileNo') }} <span class="text-rose-500">*</span></label>
                    <input required type="text" name="mobile" pattern="[0-9]+" value="{{ old('mobile') }}" placeholder="{{ __('staticwords.PleaseEnterMobileNo') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                </div>
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.Country') }} <span class="text-rose-500">*</span></label>
                    <select required name="country_id" id="country_id" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                        <option value="">{{ __('staticwords.PleaseChooseCountry') }}</option>
                        @foreach($country as $c)
                            @php $cn = DB::table('allcountry')->where('iso3', $c->country)->first(); @endphp
                            @if($cn)<option value="{{ $cn->id }}">{{ $cn->nicename }}</option>@endif
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.State') }} <span class="text-rose-500">*</span></label>
                    <select required name="state_id" id="upload_id" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                        <option value="">{{ __('staticwords.PleaseChooseState') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.City') }} <span class="text-rose-500">*</span></label>
                    <select required name="city_id" id="city_id" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                        <option value="">{{ __('staticwords.PleaseChooseCity') }}</option>
                    </select>
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.StoreAddress') }} <span class="text-rose-500">*</span></label>
                    <textarea required name="address" rows="2" placeholder="{{ __('staticwords.PleaseEnterStoreAddress') }}" class="w-full px-3.5 py-2.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] resize-none">{{ old('address') }}</textarea>
                </div>
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.PleaseChooseStoreLogo') }}</label>
                    <input type="file" name="store_logo" accept="image/*" class="block w-full text-[13px] text-slate-700 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-brand-50 file:text-brand-600 file:font-semibold hover:file:bg-brand-100">
                </div>
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.Document') }} <span class="text-rose-500">*</span></label>
                    <input type="file" name="document" accept="image/jpeg,image/png,image/webp" class="block w-full text-[13px] text-slate-700 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-brand-50 file:text-brand-600 file:font-semibold hover:file:bg-brand-100">
                    <p class="text-[11px] text-slate-500 mt-1">{{ __('Allowed: jpeg, png, webp · Max 2MB') }}</p>
                </div>
            </div>

            <div class="flex justify-between mt-6">
                <button type="button" data-action="prev" class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-6 py-2.5 rounded-full text-[14px]">{{ __('Previous') }}</button>
                <button type="button" data-action="next" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-2.5 rounded-full text-[14px] flex items-center gap-2">
                    {{ __('Next') }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </button>
            </div>
        </fieldset>

        {{-- Step 3: Payment Details --}}
        <fieldset class="seller-step p-6 hidden" data-step="3">
            <h2 class="font-display font-extrabold text-lg text-deep">{{ __('staticwords.PaymentDetails') }}</h2>
            <p class="text-[13px] text-slate-500 mt-1">{{ __('Your preferred method at time of payout.') }}</p>

            <div class="grid sm:grid-cols-2 gap-4 mt-5">
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.vat') }} <span class="text-rose-500">*</span></label>
                    <input required type="text" name="vat_no" value="{{ old('vat_no') }}" placeholder="{{ __('staticwords.PleaseEntervat') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                </div>
                <div>
                    <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.PreferredPaymentMethod') }} <span class="text-rose-500">*</span></label>
                    <select required name="preferd" id="preferd" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] bg-white">
                        <option value="">{{ __('staticwords.PleaseChoosePreferredPaymentmethod') }}</option>
                        <option value="paypal" {{ old('preferd') == 'paypal' ? 'selected' : '' }}>{{ __('Paypal') }}</option>
                        <option value="paytm" {{ old('preferd') == 'paytm' ? 'selected' : '' }}>{{ __('Paytm') }}</option>
                        <option value="bank" {{ old('preferd') == 'bank' ? 'selected' : '' }}>{{ __('Bank Transfer') }}</option>
                    </select>
                </div>
            </div>

            {{-- PayPal block --}}
            <div class="payout-box hidden mt-4" data-method="paypal">
                <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">PayPal Email</label>
                <input type="email" name="paypal_email" value="{{ old('paypal_email') }}" placeholder="{{ __('staticwords.paypalemail') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
            </div>

            {{-- Paytm block --}}
            <div class="payout-box hidden mt-4" data-method="paytm">
                <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">Paytm Mobile No</label>
                <input type="text" name="paytem_mobile" value="{{ old('paytem_mobile') }}" placeholder="{{ __('staticwords.PaytmMobile') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
            </div>

            {{-- Bank block — outer wrapper toggles visibility, inner grid handles layout. --}}
            <div class="payout-box hidden mt-4" data-method="bank">
                <div class="grid sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.AccountNumber') }}</label>
                        <input type="text" name="account" pattern="[0-9]+" value="{{ old('account') }}" placeholder="{{ __('staticwords.PleaseEnterAccountNumber') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.AccountName') }}</label>
                        <input type="text" name="account_name" value="{{ old('account_name') }}" placeholder="{{ __('staticwords.PleaseEnterAccountName') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.BankName') }}</label>
                        <input type="text" name="bank_name" value="{{ old('bank_name') }}" placeholder="{{ __('staticwords.PleaseEnterBankName') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('IFSC Code') }}</label>
                        <input type="text" name="ifsc" value="{{ old('ifsc') }}" placeholder="{{ __('staticwords.PleaseEnterIFSCCode') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-[13px] font-semibold text-slate-700 mb-1.5">{{ __('staticwords.BranchAddress') }}</label>
                        <input type="text" name="branch" value="{{ old('branch') }}" placeholder="{{ __('Please Enter Branch Address') }}" class="w-full h-11 px-3.5 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                </div>
            </div>

            <div class="flex justify-between mt-6">
                <button type="button" data-action="prev" class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-6 py-2.5 rounded-full text-[14px]">{{ __('Previous') }}</button>
                <button type="button" data-action="next" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-2.5 rounded-full text-[14px] flex items-center gap-2">
                    {{ __('Next') }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </button>
            </div>
        </fieldset>

        {{-- Step 4: Declaration --}}
        <fieldset class="seller-step p-6 hidden" data-step="4">
            <h2 class="font-display font-extrabold text-lg text-deep">{{ __('staticwords.Declaration') }}</h2>

            <label class="flex items-start gap-2 mt-4 cursor-pointer">
                <input type="checkbox" name="declare" required class="mt-1 w-4 h-4 rounded border-2 border-slate-300 text-brand-500 focus:ring-brand-500">
                <span class="text-[14px] font-semibold text-deep">{{ __('staticwords.declaretext') }}</span>
            </label>

            <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-3 mt-4 text-[12px] text-emerald-700 flex items-start gap-2">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mt-0.5 shrink-0"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                <span>{{ __('Your application will be reviewed by our team. You will get an email once your seller account is approved.') }}</span>
            </div>

            <div class="flex justify-between mt-6">
                <button type="button" data-action="prev" class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-6 py-2.5 rounded-full text-[14px]">{{ __('Previous') }}</button>
                <button type="submit" class="bg-emerald-500 hover:bg-emerald-600 text-white font-bold px-8 py-2.5 rounded-full text-[14px] flex items-center gap-2">
                    {{ __('staticwords.Submit') }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m4 12 5 5L20 7"/></svg>
                </button>
            </div>
        </fieldset>

    </form>
</section>

<script>
(function () {
    var form     = document.getElementById('sellerform');
    var steps    = form.querySelectorAll('.seller-step');
    var dots     = document.querySelectorAll('#seller-progress .step-dot');
    var labels   = document.querySelectorAll('#seller-progress li > div:last-child');
    var current  = 0;

    function show(idx) {
        steps.forEach(function (el, i) { el.classList.toggle('hidden', i !== idx); });
        dots.forEach(function (d, i) {
            if (i <= idx) {
                d.classList.add('bg-brand-500', 'text-white');
                d.classList.remove('bg-slate-200', 'text-slate-500');
                if (labels[i]) labels[i].classList.replace('text-slate-500', 'text-deep');
            } else {
                d.classList.add('bg-slate-200', 'text-slate-500');
                d.classList.remove('bg-brand-500', 'text-white');
                if (labels[i]) labels[i].classList.replace('text-deep', 'text-slate-500');
            }
        });
        current = idx;
        window.scrollTo({ top: form.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
    }

    // Native HTML5 validation per step before advancing
    function stepValid() {
        var step = steps[current];
        var fields = step.querySelectorAll('input, select, textarea');
        for (var i = 0; i < fields.length; i++) {
            var f = fields[i];
            if (f.offsetParent === null) continue; // skip hidden conditional fields
            if (!f.checkValidity()) { f.reportValidity(); return false; }
        }
        return true;
    }

    form.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-action]');
        if (!btn) return;
        if (btn.dataset.action === 'next') {
            if (!stepValid()) return;
            if (current < steps.length - 1) show(current + 1);
        } else if (btn.dataset.action === 'prev') {
            if (current > 0) show(current - 1);
        }
    });

    // Conditional payout boxes
    var preferd  = document.getElementById('preferd');
    var payouts  = document.querySelectorAll('.payout-box');
    function togglePayout() {
        var v = preferd.value;
        payouts.forEach(function (b) {
            b.classList.toggle('hidden', b.dataset.method !== v);
        });
    }
    if (preferd) {
        preferd.addEventListener('change', togglePayout);
        togglePayout();
    }
})();
</script>
@endsection

@section('script')
<script>var baseUrl = @json(url('/'));</script>
<script src="{{ url('js/ajaxlocationlist.js') }}"></script>
@endsection