<div class="txp-flow" wire:key="service-registration-flow-{{ $packageId }}">
    <div class="txp-flow__glow txp-flow__glow--one"></div>
    <div class="txp-flow__glow txp-flow__glow--two"></div>

    <div class="txp-flow__top">
        <div>
            <span class="txp-flow__eyebrow">{{ $selectedPackage?->name ?? 'Selected package' }}</span>
            <h2>{{ $step === 3 ? 'Documents and order' : 'Start your process' }}<span>.</span></h2>
            <p>
                {{ $step === 3
                    ? 'Upload now or create the order and send documents later through your dashboard.'
                    : 'Add your contact details so Texora can open the request and connect it to your dashboard.' }}
            </p>
        </div>
        <button type="button" class="txp-flow__close" @click="$dispatch('close-modal')" aria-label="Close process">
            &times;
        </button>
    </div>

    @if($step == 1)
        <div class="txp-flow__body">
            <div class="txp-flow__prep">
                <small>Keep ready</small>
                <div class="txp-flow__requirements">
                    @forelse($service?->requirements ?? [] as $req)
                        <div class="txp-flow__requirement">
                            <span>&check;</span>
                            <strong>{{ $req->document_name }}</strong>
                        </div>
                    @empty
                        <div class="txp-flow__requirement">
                            <span>&check;</span>
                            <strong>Basic contact details</strong>
                        </div>
                    @endforelse
                </div>
            </div>

            <button type="button" wire:click="goToForm" wire:loading.attr="disabled" class="txp-flow__primary">
                <span wire:loading.remove wire:target="goToForm">Start Process</span>
                <span wire:loading wire:target="goToForm">Preparing...</span>
            </button>
        </div>

    @elseif($step == 2)
        <form wire:submit.prevent="startProcess" class="txp-flow__body">
            <div class="txp-flow__prep">
                <small>Requirements</small>
                <div class="txp-flow__requirements">
                    @forelse($service?->requirements ?? [] as $req)
                        <div class="txp-flow__requirement">
                            <span>&check;</span>
                            <strong>{{ $req->document_name }}</strong>
                        </div>
                    @empty
                        <div class="txp-flow__requirement">
                            <span>&check;</span>
                            <strong>Basic contact details</strong>
                        </div>
                    @endforelse
                </div>
            </div>

            <div class="txp-flow__grid">
                <label class="txp-flow__field">
                    <span>Full name</span>
                    <input type="text" wire:model="name" autocomplete="name" placeholder="Your full name">
                    @error('name') <em>{{ $message }}</em> @enderror
                </label>
                <label class="txp-flow__field">
                    <span>CNIC number</span>
                    <input type="text" wire:model="cnic" autocomplete="off" placeholder="42XXX-XXXXXXX-X">
                    @error('cnic') <em>{{ $message }}</em> @enderror
                </label>
                <label class="txp-flow__field">
                    <span>Phone number</span>
                    <input type="text" wire:model="phone" autocomplete="tel" placeholder="03XXXXXXXXX">
                    @error('phone') <em>{{ $message }}</em> @enderror
                </label>
                <label class="txp-flow__field">
                    <span>Email address</span>
                    <input type="email" wire:model="email" autocomplete="email" placeholder="email@example.com" {{ Auth::check() ? 'disabled' : '' }}>
                    @error('email') <em>{{ $message }}</em> @enderror
                </label>
            </div>

            @if(!Auth::check())
                <div class="txp-flow__grid">
                    <label class="txp-flow__field">
                        <span>Set password</span>
                        <input type="password" wire:model="password" autocomplete="new-password" placeholder="Minimum 8 characters">
                        @error('password') <em>{{ $message }}</em> @enderror
                    </label>
                    <label class="txp-flow__field">
                        <span>Confirm password</span>
                        <input type="password" wire:model="password_confirmation" autocomplete="new-password" placeholder="Repeat password">
                    </label>
                </div>
            @endif

            @if($errorMessage)
                <div class="txp-flow__error">
                    {{ $errorMessage }}
                    @if(str_contains($errorMessage, 'sign in'))
                        <a href="{{ route('login') }}">Login here</a>
                    @endif
                </div>
            @endif

            <div class="txp-flow__actions">
                <button type="button" class="txp-flow__secondary" @click="$dispatch('close-modal')">Cancel</button>
                <button type="submit" wire:loading.attr="disabled" wire:target="startProcess" class="txp-flow__primary">
                    <span wire:loading.remove wire:target="startProcess">Proceed</span>
                    <span wire:loading wire:target="startProcess">Checking...</span>
                </button>
            </div>
        </form>

    @elseif($step == 3)
        <div class="txp-flow__body">
            <div class="txp-flow__grid">
                <label class="txp-flow__upload">
                    <span>CNIC copy</span>
                    <input type="file" wire:model="cnic_copy">
                    <strong>{{ $cnic_copy ? 'File selected' : 'Upload front/back image' }}</strong>
                </label>
                <label class="txp-flow__upload">
                    <span>Electricity bill</span>
                    <input type="file" wire:model="electricity_bill">
                    <strong>{{ $electricity_bill ? 'File selected' : 'Upload recent bill' }}</strong>
                </label>
            </div>

            <label class="txp-flow__check">
                <input type="checkbox" wire:model="upload_later">
                <span>Upload later through WhatsApp, email, or your dashboard.</span>
            </label>

            <div class="txp-flow__summary">
                <small>Package total</small>
                <strong>{{ $selectedPackage?->currency ?? 'PKR' }} {{ number_format((float) ($selectedPackage?->price ?? 0), 0) }}</strong>
                <p>You can create the request now and complete payment from your dashboard, or continue straight to payment.</p>
            </div>

            <div class="txp-flow__actions txp-flow__actions--stack">
                <button type="button" wire:click="createOrder(false)" wire:loading.attr="disabled" wire:target="createOrder" class="txp-flow__secondary">
                    Create account and order
                </button>
                <button type="button" wire:click="createOrder(true)" wire:loading.attr="disabled" wire:target="createOrder" class="txp-flow__primary">
                    Pay and proceed
                </button>
            </div>
        </div>
    @endif
</div>
