@extends('layouts.app')

@section('title', 'Service Configuration - ' . $service->name_en)

@section('content')
<div class="space-y-6" x-data="{ tab: 'form', sectionModal: false, fieldModal: false, docRuleModal: false, feeCompModal: false, stageModal: false, transitionModal: false }">

    <!-- Service Suite Header (Requirements 4, 91, 93) -->
    <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">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex items-center space-x-4 rtl:space-x-reverse">
                <div class="w-14 h-14 rounded-2xl bg-sky-500/20 text-sky-600 dark:text-sky-300 flex items-center justify-center font-extrabold text-xl">
                    ⚙️
                </div>
                <div>
                    <div class="flex items-center space-x-3 rtl:space-x-reverse">
                        <h1 class="text-xl font-extrabold text-slate-900 dark:text-white">{{ $service->name_en }}</h1>
                        <span class="px-3 py-0.5 rounded-full bg-sky-100 text-sky-700 font-bold text-xs">Version v{{ $service->version }}</span>
                        <span class="px-3 py-0.5 rounded-full bg-emerald-100 text-emerald-700 font-bold text-xs uppercase">{{ $service->status }}</span>
                    </div>
                    <div class="text-xs text-slate-500 font-mono mt-0.5">
                        Code: {{ $service->service_code }} • Category: {{ $service->category ? $service->category->name_en : 'General' }} • Authority: {{ $service->authority ? $service->authority->name : 'N/A' }}
                    </div>
                </div>
            </div>

            <!-- Suite Actions (Requirements 12, 93, 95) -->
            <div class="flex items-center space-x-2 rtl:space-x-reverse text-xs font-bold">
                <form action="{{ route('app.services.workflow.install_uae', $service->id) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="px-3.5 py-2 bg-orange-600 text-white rounded-xl">Install UAE Workflow</button>
                </form>
                <a href="{{ route('app.services.test_mode', $service->id) }}" class="px-3.5 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-xl">🧪 Test Simulator Mode</a>
                <form action="{{ route('app.services.duplicate', $service->id) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="px-3.5 py-2 bg-slate-900 text-white rounded-xl">Duplicate Service</button>
                </form>
                <form action="{{ route('app.services.publish', $service->id) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="px-4 py-2 bg-gradient-to-r from-emerald-600 to-sky-600 text-white rounded-xl shadow-md">🚀 Publish Version Snapshot</button>
                </form>
            </div>
        </div>

        <!-- Suite Tabs -->
        <div class="flex items-center space-x-1 rtl:space-x-reverse overflow-x-auto text-xs font-bold border-t border-slate-100 dark:border-slate-700 pt-4">
            <button @click="tab = 'form'" :class="tab === 'form' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl whitespace-nowrap">Dynamic Form Builder</button>
            <button @click="tab = 'documents'" :class="tab === 'documents' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl whitespace-nowrap">Document Rules ({{ $service->documentRules->count() }})</button>
            <button @click="tab = 'fees'" :class="tab === 'fees' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl whitespace-nowrap">Fee Components Engine ({{ $service->feeComponents->count() }})</button>
            <button @click="tab = 'workflow'" :class="tab === 'workflow' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl whitespace-nowrap">Workflow Stages ({{ $service->workflowStages->count() }})</button>
        </div>
    </div>

    <!-- Tab 1: Dynamic Form Builder (Requirements 13-25) -->
    <div x-show="tab === 'form'" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-6 text-xs">
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-3">
            <div>
                <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">Dynamic Form Sections & Fields</h3>
                <p class="text-slate-400 text-[11px]">Configure input fields, master data binding from Customer 360, and validation rules.</p>
            </div>
            <button @click="sectionModal = true" class="px-4 py-2 bg-sky-600 text-white font-bold text-xs rounded-xl shadow-sm">+ Add Form Section</button>
        </div>

        @php $form = $service->forms->first(); @endphp
        @if($form && $form->sections->count() > 0)
            <div class="space-y-6">
                @foreach($form->sections as $sec)
                    <div class="p-5 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 space-y-4">
                        <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700 pb-2">
                            <h4 class="font-extrabold text-slate-900 dark:text-white text-sm">{{ $sec->section_name_en }}</h4>
                            <button @click="fieldModal = true" class="px-3 py-1 bg-slate-800 text-white font-bold text-[10px] rounded-lg">+ Add Field to Section</button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                            @foreach($sec->fields as $fld)
                                <div class="p-3 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 space-y-1">
                                    <div class="flex items-center justify-between">
                                        <span class="font-bold text-slate-900 dark:text-white">{{ $fld->label_en }}</span>
                                        <span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-700 font-mono text-[9px] uppercase">{{ $fld->field_type }}</span>
                                    </div>
                                    <div class="text-[10px] font-mono text-slate-400">Key: <code>{{ $fld->field_key }}</code></div>
                                    @if($fld->master_data_binding)
                                        <div class="text-[9px] font-bold text-sky-600">Auto-fill: {{ $fld->master_data_binding }}</div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-slate-400 text-center py-6">No form sections configured for this service yet.</p>
        @endif
    </div>

    <!-- Tab 2: Contextual Document Rules (Requirements 26-32) -->
    <div x-show="tab === 'documents'" 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">
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-3">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">Document Requirement Checklist Rules</h3>
            <button @click="docRuleModal = true" class="px-4 py-2 bg-sky-600 text-white font-bold text-xs rounded-xl shadow-sm">+ Add Document Rule</button>
        </div>

        <div class="space-y-3">
            @foreach($service->documentRules as $rule)
                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex items-center justify-between">
                    <div>
                        <span class="font-bold text-slate-900 dark:text-white text-sm block">{{ $rule->display_name }}</span>
                        <span class="text-[10px] text-slate-400 font-mono">Source: {{ ucfirst($rule->source_entity) }} • Min Validity: {{ $rule->min_validity_days }} Days</span>
                    </div>
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold {{ $rule->is_mandatory ? 'bg-amber-100 text-amber-700' : 'bg-slate-200 text-slate-600' }}">
                        {{ $rule->is_mandatory ? 'MANDATORY' : 'OPTIONAL' }}
                    </span>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Tab 3: Fee Components Engine (Requirements 33-44) -->
    <div x-show="tab === 'fees'" 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">
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-3">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">Multi-Component Fee Structure Engine</h3>
            <button @click="feeCompModal = true" class="px-4 py-2 bg-sky-600 text-white font-bold text-xs rounded-xl shadow-sm">+ Add Fee Component</button>
        </div>

        <div class="space-y-3">
            @foreach($service->feeComponents as $fee)
                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex items-center justify-between">
                    <div>
                        <span class="font-bold text-slate-900 dark:text-white text-sm block">{{ $fee->name_en }}</span>
                        <span class="text-[10px] text-slate-400 font-mono">Classification: {{ str_replace('_', ' ', $fee->revenue_classification) }} • Tax: {{ ucfirst($fee->tax_behavior) }}</span>
                    </div>
                    <span class="font-mono font-extrabold text-sky-600 text-sm">AED {{ number_format($fee->amount, 2) }}</span>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Tab 4: Workflow Stages & Transitions (Requirements 49-60) -->
    <div x-show="tab === 'workflow'" 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">
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-3">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">Workflow Stages & Transition Rules</h3>
            <div class="space-x-2">
                <button @click="stageModal = true" class="px-3 py-1.5 bg-slate-900 text-white font-bold text-xs rounded-xl">+ Add Stage</button>
                <button @click="transitionModal = true" class="px-3 py-1.5 bg-sky-600 text-white font-bold text-xs rounded-xl">+ Add Transition</button>
            </div>
        </div>

        <div class="space-y-4">
            @foreach($service->workflowStages as $stg)
                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 space-y-2">
                    <div class="flex items-center justify-between">
                        <span class="font-bold text-slate-900 dark:text-white text-sm">{{ $stg->stage_name_en }}</span>
                        <span class="font-mono text-slate-400 text-[10px]">Code: {{ $stg->stage_code }} • SLA: {{ $stg->sla_minutes }} mins</span>
                    </div>

                    <div class="flex flex-wrap gap-1 text-[9px] font-bold uppercase">
                        @if($stg->queue_role)<span class="rounded-full bg-blue-100 px-2 py-0.5 text-blue-700">Queue: {{ str($stg->queue_role)->replace('_',' ') }}</span>@endif
                        @if($stg->requires_documents)<span class="rounded-full bg-amber-100 px-2 py-0.5 text-amber-700">Documents gate</span>@endif
                        @if($stg->requires_payment)<span class="rounded-full bg-emerald-100 px-2 py-0.5 text-emerald-700">Payment gate</span>@endif
                        @if($stg->requires_approval)<span class="rounded-full bg-violet-100 px-2 py-0.5 text-violet-700">Approval gate</span>@endif
                        @if($stg->requires_submission)<span class="rounded-full bg-cyan-100 px-2 py-0.5 text-cyan-700">Submission gate</span>@endif
                        @if($stg->requires_output)<span class="rounded-full bg-rose-100 px-2 py-0.5 text-rose-700">Output gate</span>@endif
                    </div>
                    @if($stg->instructions)<p class="text-[10px] text-slate-500">{{ $stg->instructions }}</p>@endif

                    <div class="space-y-1">
                        <span class="text-[10px] text-slate-400 font-bold uppercase">Allowed Transitions From Stage:</span>
                        @foreach($stg->transitionsFrom as $tr)
                            <div class="p-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 flex justify-between items-center text-[11px]">
                                <span class="font-bold text-sky-600">Action: "{{ $tr->action_name_en }}" ➔ Moves to {{ $tr->toStage ? $tr->toStage->stage_name_en : 'N/A' }}</span>
                                <span class="text-[10px] text-slate-400 font-mono">Perm: {{ $tr->required_permission ?? 'Any Authorized User' }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Modals -->
    <div x-show="sectionModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-4 text-xs">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Add Form Section</h3>
            <form action="{{ route('app.services.sections.store', $service->id) }}" method="POST" class="space-y-3">
                @csrf
                <div>
                    <label class="block font-semibold mb-1">Section Name (English) *</label>
                    <input type="text" name="section_name_en" required placeholder="Applicant Personal Details" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div class="flex justify-end space-x-2 rtl:space-x-reverse pt-2">
                    <button type="button" @click="sectionModal = false" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold rounded-xl">Cancel</button>
                    <button type="submit" class="px-5 py-2 bg-sky-600 text-white font-bold rounded-xl">Save Section</button>
                </div>
            </form>
        </div>
    </div>

    <div x-show="fieldModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-4 text-xs">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Add Dynamic Field</h3>
            @php $formSec = $service->forms->first()?->sections->first(); @endphp
            @if($formSec)
                <form action="{{ route('app.services.fields.store', $formSec->id) }}" method="POST" class="space-y-3">
                    @csrf
                    <div>
                        <label class="block font-semibold mb-1">Field Label (English) *</label>
                        <input type="text" name="label_en" required placeholder="Passport Number" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                    </div>
                    <div>
                        <label class="block font-semibold mb-1">Field Key (Stable identifier) *</label>
                        <input type="text" name="field_key" required placeholder="passport_number" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-mono">
                    </div>
                    <div>
                        <label class="block font-semibold mb-1">Field Type *</label>
                        <select name="field_type" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                            <option value="text">Text Input</option>
                            <option value="number">Number</option>
                            <option value="date">Date</option>
                            <option value="dropdown">Dropdown</option>
                        </select>
                    </div>
                    <div>
                        <label class="block font-semibold mb-1">Master Data Auto-fill Binding</label>
                        <input type="text" name="master_data_binding" placeholder="customer.current_passport.number" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-mono text-sky-600">
                    </div>
                    <div class="flex justify-end space-x-2 rtl:space-x-reverse pt-2">
                        <button type="button" @click="fieldModal = false" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold rounded-xl">Cancel</button>
                        <button type="submit" class="px-5 py-2 bg-sky-600 text-white font-bold rounded-xl">Save Field</button>
                    </div>
                </form>
            @else
                <p class="text-slate-400">Please add a form section first.</p>
            @endif
        </div>
    </div>

    <div x-show="stageModal" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 p-4 backdrop-blur-sm" x-cloak>
        <div class="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl">
            <div class="flex items-center justify-between"><div><h3 class="text-sm font-bold text-[#0b1f38]">Add Controlled Workflow Stage</h3><p class="text-[10px] text-slate-500">Configure ownership, SLA and the evidence required before leaving this stage.</p></div><button @click="stageModal=false" class="text-xl text-slate-400">×</button></div>
            <form action="{{ route('app.services.stages.store',$service->id) }}" method="POST" class="mt-5 grid gap-3 sm:grid-cols-2">@csrf
                <input required name="stage_code" placeholder="Stable code, e.g. LEGAL_REVIEW *" class="erp-input"><input required name="stage_name_en" placeholder="Stage name *" class="erp-input"><input name="stage_name_ar" placeholder="Arabic stage name" class="erp-input"><select required name="stage_type" class="erp-input"><option value="internal_processing">Internal processing</option><option value="start">Start</option><option value="verification">Verification</option><option value="payment">Payment</option><option value="approval">Approval</option><option value="government_submission">Government submission</option><option value="completion">Completion</option><option value="rejection">Rejection</option></select><input required type="number" min="1" max="9999" name="display_order" value="100" placeholder="Display order" class="erp-input"><input required type="number" min="0" name="sla_minutes" value="60" placeholder="SLA minutes" class="erp-input"><input name="queue_role" placeholder="Role slug, e.g. typist" class="erp-input sm:col-span-2"><textarea name="instructions" rows="2" placeholder="Staff instructions" class="erp-input sm:col-span-2"></textarea>
                <div class="grid grid-cols-2 gap-2 rounded-xl bg-slate-50 p-3 text-[10px] sm:col-span-2 sm:grid-cols-4"><label><input type="checkbox" name="requires_documents" value="1"> Documents gate</label><label><input type="checkbox" name="requires_payment" value="1"> Payment gate</label><label><input type="checkbox" name="requires_approval" value="1"> Approval gate</label><label><input type="checkbox" name="requires_submission" value="1"> Submission gate</label><label><input type="checkbox" name="requires_output" value="1"> Output gate</label><label><input type="checkbox" name="requires_notification" value="1"> Notification gate</label><label><input type="checkbox" name="can_skip" value="1"> Can skip</label><label><input type="checkbox" name="can_reopen" value="1"> Can reopen</label><label><input checked type="checkbox" name="is_customer_visible" value="1"> Customer visible</label></div>
                <button class="rounded-xl bg-orange-600 py-3 text-xs font-bold text-white sm:col-span-2">Create Workflow Stage</button>
            </form>
        </div>
    </div>

    <div x-show="transitionModal" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 p-4 backdrop-blur-sm" x-cloak>
        <div class="w-full max-w-2xl rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl">
            <div class="flex items-center justify-between"><div><h3 class="text-sm font-bold text-[#0b1f38]">Add Controlled Transition</h3><p class="text-[10px] text-slate-500">Only direct paths configured here can be executed.</p></div><button @click="transitionModal=false" class="text-xl text-slate-400">×</button></div>
            <form action="{{ route('app.services.transitions.store',$service->id) }}" method="POST" class="mt-5 grid gap-3 sm:grid-cols-2">@csrf
                <select required name="from_stage_id" class="erp-input"><option value="">From stage *</option>@foreach($service->workflowStages as $stage)<option value="{{ $stage->id }}">{{ $stage->stage_name_en }}</option>@endforeach</select><select required name="to_stage_id" class="erp-input"><option value="">To stage *</option>@foreach($service->workflowStages as $stage)<option value="{{ $stage->id }}">{{ $stage->stage_name_en }}</option>@endforeach</select><input required name="action_name_en" placeholder="Action name, e.g. Approve & submit *" class="erp-input"><input name="action_name_ar" placeholder="Arabic action name" class="erp-input"><input name="required_permission" list="workflow-permissions" placeholder="Required permission slug" class="erp-input"><datalist id="workflow-permissions"><option value="applications.create"><option value="applications.edit"><option value="applications.approve"><option value="applications.submit"><option value="applications.reject"><option value="documents.upload"><option value="payments.collect"><option value="communications.manage"></datalist><select name="payment_requirement" class="erp-input"><option value="none">No payment gate</option><option value="full_or_credit">Full payment or corporate credit</option><option value="full">Full payment</option><option value="deposit">Deposit</option><option value="government_fee">Government fee only</option></select><input name="target_application_status" placeholder="Target application status" class="erp-input sm:col-span-2"><div class="flex flex-wrap gap-4 rounded-xl bg-slate-50 p-3 text-[10px] sm:col-span-2"><label><input type="checkbox" name="requires_approval" value="1"> Requires approval</label><label><input checked type="checkbox" name="creates_task" value="1"> Create task</label><label><input type="checkbox" name="is_return_path" value="1"> Return/correction path</label></div><button class="rounded-xl bg-[#0b1f38] py-3 text-xs font-bold text-white sm:col-span-2">Create Direct Transition</button>
            </form>
        </div>
    </div>

</div>
@endsection