@extends('layouts.app')

@section('content')
@php
    $fieldMap = $fields->keyBy('name');
    $options = fn (string $name, array $fallback = []) => (array) ($fieldMap->get($name)?->options ?: $fallback);
    $serviceOptions = $options('type_of_service');
    $academicLevels = $options('academic_level');
    $subjects = $options('subject');
    $deadlines = $options('deadline');
    $writerCategories = $options('writer_category');
    $features = $options('additional_features');
    $knownFields = ['academic_level','topic_title','subject','type_of_service','pages','powerpoint_slides','deadline','writing_style','language_style','spacing','number_of_sources','writer_category','order_description','additional_features','coupon_code','custom_quote','currency','customer_name','email','phone','country','payment_method'];
    $customFields = $fields->reject(fn ($field) => in_array($field->name, $knownFields, true));
@endphp

<section class="bg-[radial-gradient(circle_at_top_left,rgba(14,165,233,.10),transparent_34%),linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)]">
    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div class="grid gap-6 lg:grid-cols-[1fr_420px]">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-emerald-700">Secure academic order form</p>
                <h1 class="mt-3 text-4xl font-bold leading-tight text-slate-950 sm:text-5xl">Start your order with clear pricing and private file upload.</h1>
                <p class="mt-4 max-w-3xl text-lg leading-8 text-slate-600">Choose your service, deadline, academic level, writer category, and support options. Your total updates as you go, and custom quotes go to admin review before payment.</p>
                <div class="mt-6 flex flex-wrap gap-3 text-sm font-semibold">
                    <span class="inline-flex items-center gap-2 rounded-lg bg-white px-3 py-2 text-slate-700 shadow-sm ring-1 ring-slate-200"><i data-lucide="shield-check" class="h-4 w-4 text-emerald-600"></i> Private files</span>
                    <span class="inline-flex items-center gap-2 rounded-lg bg-white px-3 py-2 text-slate-700 shadow-sm ring-1 ring-slate-200"><i data-lucide="receipt" class="h-4 w-4 text-sky-600"></i> Live quote</span>
                    <span class="inline-flex items-center gap-2 rounded-lg bg-white px-3 py-2 text-slate-700 shadow-sm ring-1 ring-slate-200"><i data-lucide="credit-card" class="h-4 w-4 text-rose-600"></i> PayPal checkout</span>
                </div>
            </div>
            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-xl shadow-slate-200/70">
                <p class="text-sm font-semibold uppercase tracking-wide text-slate-500">Order flow</p>
                <div class="mt-4 grid gap-3">
                    @foreach (['Describe task', 'Get instant quote', 'Upload files', 'Pay or request review'] as $index => $step)
                        <div class="flex items-center gap-3">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg {{ $index === 0 ? 'bg-slate-950 text-white' : 'bg-slate-100 text-slate-600' }} text-sm font-bold">{{ $index + 1 }}</span>
                            <span class="text-sm font-semibold text-slate-700">{{ $step }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bg-slate-50">
    <form
        x-data="orderPricingForm()"
        x-init="init()"
        @input.debounce.350ms="refreshQuote()"
        @change="refreshQuote()"
        action="{{ route('orders.store') }}"
        method="post"
        enctype="multipart/form-data"
        class="mx-auto grid max-w-7xl gap-6 px-4 pb-40 pt-8 sm:px-6 lg:grid-cols-[1fr_390px] lg:px-8 lg:pb-8"
    >
        @csrf
        <input type="hidden" name="source_url" value="{{ url()->previous() }}">
        <input type="hidden" name="service_slug" x-model="form.service_slug">

        <div class="grid gap-6">
            @if ($errors->any())
                <div class="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-800">
                    Please review the highlighted fields and try again.
                </div>
            @endif

            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between gap-4">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-sky-700">Step 1</p>
                        <h2 class="mt-1 text-2xl font-bold">Service details</h2>
                    </div>
                    <i data-lucide="clipboard-list" class="h-7 w-7 text-sky-600"></i>
                </div>
                <div class="mt-5 grid gap-4 md:grid-cols-2">
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Type of service
                        <select name="type_of_service" x-model="form.type_of_service" required class="order-input">
                            @foreach ($serviceOptions as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Existing platform service
                        <select x-model="form.service_slug" class="order-input">
                            <option value="">General academic support</option>
                            @foreach ($services as $service)
                                <option value="{{ $service->slug }}" @selected($prefillService === $service->slug)>{{ $service->title }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700 md:col-span-2">Topic/title
                        <input name="topic_title" required maxlength="220" value="{{ old('topic_title') }}" class="order-input" placeholder="Example: Nursing care plan reflection or scholarship essay draft">
                        @error('topic_title')<span class="text-xs text-rose-700">{{ $message }}</span>@enderror
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Subject
                        <select name="subject" x-model="form.subject" required class="order-input">
                            @foreach ($subjects as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Academic level
                        <select name="academic_level" x-model="form.academic_level" required class="order-input">
                            @foreach ($academicLevels as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                </div>
            </div>

            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between gap-4">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-emerald-700">Step 2</p>
                        <h2 class="mt-1 text-2xl font-bold">Length, deadline, and writer</h2>
                    </div>
                    <i data-lucide="timer" class="h-7 w-7 text-emerald-600"></i>
                </div>
                <div class="mt-5 grid gap-4 md:grid-cols-3">
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Pages
                        <input name="pages" type="number" min="1" max="500" x-model.number="form.pages" required class="order-input">
                    </label>
                    <div class="grid gap-1 text-sm font-semibold text-slate-700">
                        <span>Estimated words</span>
                        <div class="flex min-h-[2.75rem] items-center rounded-lg border border-slate-200 bg-slate-50 px-3 text-sm text-slate-700" x-text="`${Number(form.pages || 1) * 275} words`"></div>
                    </div>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">PowerPoint slides
                        <input name="powerpoint_slides" type="number" min="0" max="300" x-model.number="form.powerpoint_slides" class="order-input">
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Sources
                        <input name="number_of_sources" type="number" min="0" max="500" x-model.number="form.number_of_sources" class="order-input">
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Deadline/urgency
                        <select name="deadline" x-model="form.deadline" required class="order-input">
                            @foreach ($deadlines as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Writer category
                        <select name="writer_category" x-model="form.writer_category" required class="order-input">
                            @foreach ($writerCategories as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Currency
                        <select name="currency" x-model="form.currency" required class="order-input">
                            @foreach ($options('currency', ['USD']) as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Writing style
                        <select name="writing_style" class="order-input">
                            @foreach ($options('writing_style') as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Language style
                        <select name="language_style" class="order-input">
                            @foreach ($options('language_style') as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Spacing
                        <select name="spacing" class="order-input">
                            @foreach ($options('spacing') as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                </div>
            </div>

            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between gap-4">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-rose-700">Step 3</p>
                        <h2 class="mt-1 text-2xl font-bold">Instructions and files</h2>
                    </div>
                    <i data-lucide="file-up" class="h-7 w-7 text-rose-600"></i>
                </div>
                <div class="mt-5 grid gap-4">
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Order description
                        <textarea name="order_description" required maxlength="12000" rows="7" class="order-input" placeholder="Paste instructions, rubric notes, grading requirements, formatting needs, or exam prep goals.">{{ old('order_description') }}</textarea>
                    </label>
                    <div>
                        <p class="text-sm font-semibold text-slate-700">Additional features</p>
                        <div class="mt-3 grid gap-3 sm:grid-cols-2">
                            @foreach ($features as $feature)
                                <label class="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-700">
                                    <input type="checkbox" name="additional_features[]" value="{{ $feature }}" x-model="form.additional_features" class="h-4 w-4 rounded border-slate-300 text-emerald-600">
                                    {{ $feature }}
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">File attachments
                        <input name="attachments[]" type="file" multiple accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.xlsx,.xls,.csv,.txt,.zip" class="order-input bg-white">
                        <span class="text-xs font-normal text-slate-500">Allowed: PDF, Word, Excel, images, CSV, TXT, ZIP. Max 20MB each, up to 8 files.</span>
                    </label>
                    @if ($customFields->isNotEmpty())
                        <div class="grid gap-4 md:grid-cols-2">
                            @foreach ($customFields as $field)
                                <label class="grid gap-1 text-sm font-semibold text-slate-700">{{ $field->label }}
                                    @if ($field->type === 'textarea')
                                        <textarea name="custom_fields[{{ $field->name }}]" rows="4" class="order-input" @required($field->required)></textarea>
                                    @elseif ($field->type === 'select')
                                        <select name="custom_fields[{{ $field->name }}]" class="order-input" @required($field->required)>
                                            @foreach ((array) $field->options as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                    @elseif ($field->type === 'checkboxes')
                                        <span class="grid gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3">
                                            @foreach ((array) $field->options as $option)
                                                <label class="flex items-center gap-2 text-sm font-semibold"><input type="checkbox" name="custom_fields[{{ $field->name }}][]" value="{{ $option }}"> {{ $option }}</label>
                                            @endforeach
                                        </span>
                                    @else
                                        <input name="custom_fields[{{ $field->name }}]" type="{{ in_array($field->type, ['number', 'email'], true) ? $field->type : 'text' }}" class="order-input" @required($field->required)>
                                    @endif
                                </label>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between gap-4">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-amber-700">Step 4</p>
                        <h2 class="mt-1 text-2xl font-bold">Contact and checkout</h2>
                    </div>
                    <i data-lucide="lock-keyhole" class="h-7 w-7 text-amber-600"></i>
                </div>
                <div class="mt-5 grid gap-4 md:grid-cols-2">
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Coupon code
                        <input name="coupon_code" x-model="form.coupon_code" class="order-input uppercase" placeholder="Example: WELCOME10">
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Not satisfied? Enter your quote
                        <input name="custom_quote" type="number" min="1" step="0.01" x-model.number="form.custom_quote" class="order-input" placeholder="Optional">
                        <span class="text-xs font-normal text-slate-500">Custom quote orders are saved as Awaiting Review.</span>
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Customer name
                        <input name="customer_name" required value="{{ old('customer_name', auth()->user()->name ?? '') }}" class="order-input">
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Email address
                        <input name="email" type="email" required value="{{ old('email', auth()->user()->email ?? '') }}" class="order-input">
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Phone/WhatsApp
                        <input name="phone" value="{{ old('phone', auth()->user()->phone ?? '') }}" class="order-input">
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700">Country
                        <input name="country" value="{{ old('country', 'United States') }}" class="order-input">
                    </label>
                    <label class="grid gap-1 text-sm font-semibold text-slate-700 md:col-span-2">Payment method
                        <select name="payment_method" class="order-input">
                            @foreach ($options('payment_method', ['PayPal', 'Manual invoice']) as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </label>
                </div>
            </div>
        </div>

        <aside class="lg:sticky lg:top-24 lg:self-start">
            <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-xl shadow-slate-200/70">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Live cost summary</p>
                        <p class="mt-1 text-3xl font-bold" x-text="money(quote.total)"></p>
                    </div>
                    <span class="rounded-lg bg-emerald-50 p-3 text-emerald-700"><i data-lucide="sparkles" class="h-6 w-6"></i></span>
                </div>
                <div class="mt-5 grid gap-2 text-sm">
                    <template x-for="line in quote.breakdown" :key="line.label">
                        <div class="flex items-start justify-between gap-4 border-b border-slate-100 py-2">
                            <span>
                                <span class="block font-semibold text-slate-700" x-text="line.label"></span>
                                <span class="block text-xs text-slate-500" x-text="line.detail"></span>
                            </span>
                            <span class="font-semibold" :class="line.amount < 0 ? 'text-emerald-700' : 'text-slate-950'" x-text="money(line.amount)"></span>
                        </div>
                    </template>
                </div>
                <div class="mt-4 rounded-lg bg-slate-950 p-4 text-white">
                    <div class="flex items-center justify-between text-sm text-slate-300"><span>Subtotal</span><span x-text="money(quote.subtotal)"></span></div>
                    <div class="mt-2 flex items-center justify-between text-sm text-emerald-300"><span>Discount</span><span x-text="'-' + money(quote.discount)"></span></div>
                    <div class="mt-3 flex items-center justify-between border-t border-white/10 pt-3 text-lg font-bold"><span>Total</span><span x-text="form.custom_quote ? money(form.custom_quote) + ' quote' : money(quote.total)"></span></div>
                </div>
                <button class="mt-4 flex w-full items-center justify-center gap-2 rounded-lg bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow-lg shadow-emerald-600/25 hover:bg-emerald-700">
                    <i data-lucide="send" class="h-4 w-4"></i>
                    <span x-text="form.custom_quote ? 'Submit Custom Quote' : 'Place Order'"></span>
                </button>
                <p class="mt-3 text-center text-xs leading-5 text-slate-500">Orders are protected by CSRF validation, private file storage, role-based admin access, and payment verification logs.</p>
            </div>

            <div class="mt-4 rounded-lg border border-sky-200 bg-sky-50 p-4 text-sm leading-6 text-sky-950">
                <strong>Need help choosing?</strong> Use Start My Order for essays, admission writing, nursing, research, SPSS, editing, tutoring, and certification exam preparation.
            </div>
        </aside>

        <div class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden">
            <button type="button" @click="summaryOpen = !summaryOpen" class="flex w-full items-center justify-between gap-3 text-left">
                <span>
                    <span class="block text-xs font-semibold uppercase tracking-wide text-slate-500">Live total</span>
                    <span class="block text-2xl font-bold text-slate-950" x-text="form.custom_quote ? money(form.custom_quote) + ' quote' : money(quote.total)"></span>
                </span>
                <i data-lucide="chevron-up" class="h-5 w-5 text-slate-500"></i>
            </button>
            <div x-cloak x-show="summaryOpen" class="mt-3 max-h-64 overflow-y-auto rounded-lg bg-slate-50 p-3 text-sm">
                <template x-for="line in quote.breakdown" :key="`mobile-${line.label}`">
                    <div class="flex justify-between gap-4 border-b border-slate-200 py-2">
                        <span x-text="line.label"></span>
                        <span class="font-semibold" x-text="money(line.amount)"></span>
                    </div>
                </template>
            </div>
            <button class="mt-3 flex w-full items-center justify-center gap-2 rounded-lg bg-emerald-600 px-5 py-3 text-sm font-bold text-white">
                <i data-lucide="send" class="h-4 w-4"></i>
                <span x-text="form.custom_quote ? 'Submit Custom Quote' : 'Place Order'"></span>
            </button>
        </div>
    </form>
</section>

<script>
function orderPricingForm() {
    return {
        form: {
            service_slug: @json($prefillService),
            academic_level: @json($academicLevels[0] ?? 'College'),
            subject: @json($subjects[0] ?? 'English'),
            type_of_service: @json($serviceOptions[0] ?? 'Assignment assistance'),
            pages: 1,
            powerpoint_slides: 0,
            deadline: @json($deadlines[0] ?? '7 days'),
            number_of_sources: 0,
            writer_category: @json($writerCategories[0] ?? 'Standard'),
            additional_features: [],
            coupon_code: '',
            custom_quote: '',
            currency: 'USD'
        },
        quote: { subtotal: 0, discount: 0, total: 0, currency: 'USD', breakdown: [] },
        summaryOpen: false,
        init() { this.refreshQuote(); },
        money(value) {
            const amount = Number(value || 0);
            return `${this.form.currency} ${amount.toFixed(2)}`;
        },
        refreshQuote() {
            fetch(@json(route('orders.quote')), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': @json(csrf_token()),
                    'Accept': 'application/json'
                },
                body: JSON.stringify(this.form)
            }).then(response => response.json()).then(data => {
                this.quote = data;
                this.form.currency = data.currency || this.form.currency;
            }).catch(() => {});
        }
    }
}
</script>
@endsection