@extends('layouts.wizard')

@section('content')
<div x-data="wizardForm()" class="space-y-6">
    <div class="flex justify-between gap-2 text-sm font-medium text-slate-600">
        <span :class="step >= 1 ? 'text-brand' : ''">1. Terms</span>
        <span :class="step >= 2 ? 'text-brand' : ''">2. Payment & ID</span>
        <span :class="step >= 3 ? 'text-brand' : ''">3. Review</span>
    </div>

    <form method="POST" action="{{ route('wizard.submit', ['token' => $contract->token]) }}" enctype="multipart/form-data" @submit="prepareSubmit">
        @csrf
        <input type="hidden" name="token" value="{{ $contract->token }}">
        <input type="hidden" name="c_identity_doc" x-model="c_identity_doc">
        <input type="hidden" name="c_selfie_doc" x-model="c_selfie_doc">
        <input type="hidden" name="c_creditcard_front_doc" x-model="c_creditcard_front_doc">
        <input type="hidden" name="c_creditcard_back_doc" x-model="c_creditcard_back_doc">
        <input type="hidden" name="c_signature_doc" x-model="c_signature_doc">

        <section x-show="step === 1" class="card">
            <h2 class="mb-4 text-lg font-semibold text-brand">{{ $contract->type }}</h2>
            <div class="mb-4 grid gap-2 text-sm md:grid-cols-2">
                <div><strong>Business:</strong> {{ $contract->owner }}<br>{{ $contract->owner_email }}<br>{{ $contract->owner_address }}</div>
                <div><strong>Customer:</strong> {{ $contract->name }}<br>{{ $contract->email }}<br>{{ $contract->phone }}</div>
            </div>
            @if($contract->shopify_order_name)
                <p class="mb-2 text-sm"><strong>Order:</strong> #{{ $contract->shopify_order_name }} · <strong>Total:</strong> ${{ number_format((float) $contract->amount, 2) }}</p>
            @endif
            <div class="mb-4 rounded-lg bg-slate-50 p-4 text-sm leading-relaxed">{{ $contract->terms }}</div>
            <label class="label">Your initials</label>
            <input class="input" name="c_initial" x-model="c_initial" required maxlength="10">
            <button type="button" class="btn-primary mt-4 w-full" @click="if(c_initial) step = 2">Continue</button>
        </section>

        <section x-show="step === 2" class="space-y-4">
            @if($contract->source === 'new' || $contract->payment_method === 'authorize.net' || $contract->payment_method === 'shopify_payments')
            <div class="card">
                <h3 class="mb-4 font-semibold text-brand">Credit card</h3>
                <div class="credit-card mb-4" :class="cardType">
                    <div class="credit-card-number" x-text="maskedNumber"></div>
                    <div class="credit-card-name" x-text="c_card_holder_name || 'Card Holder'"></div>
                    <div class="credit-card-exp" x-text="(c_card_expiration_month || 'MM') + '/' + (c_card_expiration_year ? String(c_card_expiration_year).slice(-2) : 'YY')"></div>
                </div>
                <div class="grid gap-3 md:grid-cols-2">
                    <div class="md:col-span-2"><label class="label">Card number (last 4 digits visible)</label>
                        <input class="input" name="c_card_number" x-model="c_card_number" @input="updateMask" inputmode="numeric" autocomplete="off" required></div>
                    <div class="md:col-span-2"><label class="label">Card holder</label><input class="input" name="c_card_holder_name" x-model="c_card_holder_name" required></div>
                    <div><label class="label">Exp month</label><input class="input" name="c_card_expiration_month" x-model="c_card_expiration_month" maxlength="2" required></div>
                    <div><label class="label">Exp year</label><input class="input" name="c_card_expiration_year" x-model="c_card_expiration_year" maxlength="4" required></div>
                    <div><label class="label">Billing zip</label><input class="input" name="c_zip" x-model="c_zip" required></div>
                </div>
            </div>
            @endif

            <div class="card">
                <label class="label">Signature (type full name)</label>
                <input class="input signature-input" name="c_signature" x-model="c_signature" required>
            </div>

            <div class="card grid gap-4 md:grid-cols-2">
                <div><label class="label">Government ID</label><input type="file" @change="upload($event, 'identity', 'c_identity_doc')" accept="image/*,.pdf" required></div>
                <div><label class="label">Selfie with ID</label><input type="file" @change="upload($event, 'selfie', 'c_selfie_doc')" accept="image/*" required></div>
                @if($contract->source === 'new' || $contract->payment_method === 'shopify_payments')
                <div><label class="label">Card front</label><input type="file" @change="upload($event, 'creditcard_front', 'c_creditcard_front_doc')" accept="image/*" required></div>
                <div><label class="label">Card back</label><input type="file" @change="upload($event, 'creditcard_back', 'c_creditcard_back_doc')" accept="image/*" required></div>
                @endif
            </div>

            <div class="flex gap-3">
                <button type="button" class="btn-secondary flex-1" @click="step = 1">Back</button>
                <button type="button" class="btn-primary flex-1" @click="validateStep2()">Continue</button>
            </div>
        </section>

        <section x-show="step === 3" class="card space-y-4">
            <h3 class="font-semibold text-brand">Review & submit</h3>
            <p class="text-sm text-slate-600">By submitting, you authorize {{ config('ccaf.owner') }} to charge your card as described in the agreement.</p>
            <div class="rounded-lg bg-slate-50 p-4 text-sm">
                <div><strong>Name:</strong> {{ $contract->name }}</div>
                <div><strong>Initials:</strong> <span x-text="c_initial"></span></div>
                <div><strong>Signature:</strong> <span x-text="c_signature"></span></div>
            </div>
            <div class="flex gap-3">
                <button type="button" class="btn-secondary flex-1" @click="step = 2">Back</button>
                <button type="submit" class="btn-primary flex-1">Submit authorization</button>
            </div>
        </section>
    </form>
</div>

<script>
function wizardForm() {
    return {
        step: 1,
        c_initial: '',
        c_signature: '',
        c_card_holder_name: @json($contract->c_card_holder_name ?? $contract->card_holder_name ?? ''),
        c_card_number: '',
        c_card_expiration_month: '',
        c_card_expiration_year: '',
        c_zip: '',
        maskedNumber: '**** **** **** ****',
        cardType: 'visa',
        c_identity_doc: '',
        c_selfie_doc: '',
        c_creditcard_front_doc: '',
        c_creditcard_back_doc: '',
        c_signature_doc: '',
        updateMask() {
            const digits = this.c_card_number.replace(/\D/g, '');
            const show = digits.slice(-4);
            const hidden = digits.slice(0, -4).replace(/\d/g, '*');
            const combined = (hidden + show).padEnd(Math.max(digits.length, 16), '*');
            this.maskedNumber = combined.replace(/(.{4})/g, '$1 ').trim();
            this.cardType = digits.startsWith('3') ? 'amex' : 'visa';
        },
        async upload(event, type, field) {
            const file = event.target.files[0];
            if (!file) return;
            const fd = new FormData();
            fd.append('file', file);
            fd.append('type', type);
            fd.append('token', '{{ $contract->token }}');
            const res = await fetch('{{ route('wizard.upload', ['token' => $contract->token]) }}', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                body: fd
            });
            const data = await res.json();
            if (data.success) this[field] = data.filename;
        },
        validateStep2() {
            if (!this.c_signature || !this.c_identity_doc || !this.c_selfie_doc) {
                alert('Please complete signature and required uploads.');
                return;
            }
            this.step = 3;
        },
        prepareSubmit(e) {}
    }
}
</script>
@endsection