@extends('layouts.app')

@section('title', 'Test Mode Simulator - ' . $service->name_en)

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <div class="inline-flex items-center space-x-2 rtl:space-x-reverse px-3 py-1 rounded-full bg-amber-500/20 text-amber-600 dark:text-amber-300 font-bold text-xs mb-1">
                <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
                <span>Development Test Simulator Mode</span>
            </div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Service Simulator Preview: {{ $service->name_en }}</h1>
            <p class="text-xs text-slate-500">Preview form inputs, document checklists, fee calculations, and workflow without creating live applications.</p>
        </div>
        <a href="{{ route('app.services.show', $service->id) }}" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs rounded-xl">Back to Suite</a>
    </div>

    <!-- Calculated Fee Preview Card (Requirements 33-44, 95) -->
    <div class="bg-gradient-to-r from-slate-950 to-sky-950 text-white rounded-3xl p-6 shadow-xl space-y-4 text-xs">
        <h3 class="font-bold text-sky-400 uppercase tracking-wider text-xs border-b border-slate-800 pb-2">Simulated Fee Computation Engine</h3>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 font-mono">
            <div>
                <span class="text-slate-400 block text-[10px]">Government Fee</span>
                <span class="text-lg font-extrabold text-white">AED {{ number_format($calculatedFees['gov_fee'], 2) }}</span>
            </div>

            <div>
                <span class="text-slate-400 block text-[10px]">Typing & Service Charge</span>
                <span class="text-lg font-extrabold text-white">AED {{ number_format($calculatedFees['typing_fee'] + $calculatedFees['service_charge'], 2) }}</span>
            </div>

            <div>
                <span class="text-slate-400 block text-[10px]">UAE 5% VAT</span>
                <span class="text-lg font-extrabold text-white">AED {{ number_format($calculatedFees['vat_amount'], 2) }}</span>
            </div>

            <div>
                <span class="text-slate-400 block text-[10px]">Total Service Price</span>
                <span class="text-xl font-extrabold text-emerald-400">AED {{ number_format($calculatedFees['total_price'], 2) }}</span>
            </div>
        </div>
    </div>

    <!-- Simulated Dynamic Form Fields Preview -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
        <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Simulated Application Form Preview</h3>

        @php $form = $service->forms->first(); @endphp
        @if($form)
            <div class="space-y-4">
                @foreach($form->sections as $sec)
                    <div class="space-y-3">
                        <h4 class="font-bold text-slate-800 dark:text-slate-200 border-b pb-1 text-xs">{{ $sec->section_name_en }}</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            @foreach($sec->fields as $fld)
                                <div>
                                    <label class="block font-semibold mb-1">{{ $fld->label_en }} @if($fld->is_required) <span class="text-rose-500">*</span> @endif</label>
                                    <input type="{{ $fld->field_type === 'number' ? 'number' : 'text' }}" placeholder="{{ $fld->placeholder ?? $fld->label_en }}" disabled class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl cursor-not-allowed">
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-slate-400 text-center py-4">No dynamic form fields configured for simulation preview.</p>
        @endif
    </div>
</div>
@endsection