@extends('layouts.app')
@section('title','New Application')
@section('content')
<div class="space-y-5" x-data="applicationWizard()" x-init="init()">
    @include('tenant.partials.typist-page-nav')
    <section class="rounded-[28px] border border-emerald-100 bg-gradient-to-br from-white via-emerald-50 to-sky-50 p-6 shadow-sm sm:p-8"><div class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between"><div><span class="rounded-full bg-emerald-100 px-3 py-1 text-[10px] font-bold uppercase tracking-[.18em] text-emerald-700">10-step connected intake</span><h1 class="mt-3 text-2xl font-bold text-slate-950">Create a production application</h1><p class="mt-2 max-w-3xl text-sm text-slate-600">Customer data, applicant relationships, current private documents, dynamic fields, government fees, payment intent, SLA and typist assignment stay connected.</p></div><div class="grid grid-cols-5 gap-1 text-center sm:grid-cols-10">@foreach(range(1,10) as $step)<span class="grid h-8 w-8 place-items-center rounded-lg bg-white text-[10px] font-bold text-emerald-700 shadow-sm">{{ str_pad($step,2,'0',STR_PAD_LEFT) }}</span>@endforeach</div></div></section>
    @if($errors->any())<div class="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700"><strong>Please check the application.</strong><ul class="mt-2 list-disc pl-5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif
    <form method="POST" action="{{ route('app.applications.store') }}" class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_370px]">@csrf
        <input type="hidden" name="customer_id" :value="selectedCustomer?.id||''"><input type="hidden" name="family_member_id" :value="applicantType==='family_member'?familyMemberId:''"><input type="hidden" name="corporate_employee_id" :value="applicantType==='corporate_employee'?corporateEmployeeId:''"><input type="hidden" name="company_id" :value="applicantType==='corporate_employee'?companyId:''"><input type="hidden" name="allow_missing_documents" :value="allowMissing?1:0">
        <div class="space-y-5">
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>01 · Search customer</h2><p>Mobile, name, passport, Emirates ID, UID or customer code.</p></div><a href="{{ route('app.customers.create',['return_to'=>'application']) }}">Quick create customer</a></div><template x-if="!selectedCustomer"><div class="relative mt-4"><input x-model="searchQuery" @input.debounce.300ms="searchCustomers" class="erp-input w-full" placeholder="Search customer records"><div x-show="results.length" class="absolute z-30 mt-2 max-h-72 w-full overflow-auto rounded-xl border border-slate-200 bg-white p-2 shadow-xl"><template x-for="customer in results" :key="customer.id"><button type="button" @click="chooseCustomer(customer)" class="flex w-full justify-between rounded-lg p-3 text-left hover:bg-emerald-50"><span><strong class="block text-sm" x-text="customer.full_name_en"></strong><small class="text-slate-500" x-text="(customer.contact?.primary_mobile||'No mobile')+' · '+customer.customer_code"></small></span><span class="text-xs font-bold text-emerald-700">Select</span></button></template></div><p x-show="searched&&!loading&&!results.length" class="mt-2 text-xs text-amber-700">No match found. Use quick create without leaving this workflow.</p></div></template><template x-if="selectedCustomer"><div class="mt-4 flex items-center justify-between rounded-2xl border border-emerald-200 bg-emerald-50 p-4"><div><strong x-text="selectedCustomer.full_name_en"></strong><p class="text-xs text-slate-600" x-text="customerMobile(selectedCustomer)+' · '+selectedCustomer.customer_code"></p></div><button type="button" @click="clearCustomer" class="text-xs font-bold text-slate-600">Change</button></div></template></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>02 · Choose applicant</h2><p>Customer, family/dependent or corporate employee with sponsor context.</p></div></div><div class="mt-4 grid gap-3 md:grid-cols-2"><label class="text-xs font-bold">Applicant type<select name="applicant_type" x-model="applicantType" @change="applicantChanged" class="erp-input mt-1 w-full"><option value="individual">Customer himself/herself</option><option value="family_member">Family member / dependent</option><option value="corporate_employee">Corporate employee</option></select></label><label x-show="applicantType==='family_member'" class="text-xs font-bold">Family member<select x-model="familyMemberId" @change="loadContext" class="erp-input mt-1 w-full"><option value="">Select dependent</option><template x-for="member in context.family||[]" :key="member.id"><option :value="member.id" x-text="member.name+' · '+member.relationship"></option></template></select></label><label x-show="applicantType==='corporate_employee'" class="text-xs font-bold">Company<select x-model="companyId" @change="companyChanged" class="erp-input mt-1 w-full"><option value="">Select company</option>@foreach($companies as $company)<option value="{{ $company->id }}">{{ $company->name_en }}</option>@endforeach</select></label><label x-show="applicantType==='corporate_employee'" class="text-xs font-bold">Employee<select x-model="corporateEmployeeId" @change="loadContext" class="erp-input mt-1 w-full"><option value="">Select employee</option><template x-for="employee in corporateEmployees" :key="employee.id"><option :value="employee.id" x-text="employee.full_name+' · '+employee.corporate_employee_code"></option></template></select></label></div><div x-show="context.profile" class="mt-4 grid gap-2 rounded-2xl bg-slate-50 p-4 text-xs sm:grid-cols-3"><template x-for="[label,value] in profileEntries" :key="label"><div><small class="text-slate-400" x-text="label"></small><strong class="mt-1 block" x-text="value||'Not recorded'"></strong></div></template></div></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>03 · Select service</h2><p>Dynamic authority, processing time, fees and required documents.</p></div></div><label class="mt-4 block text-xs font-bold">Government service<select name="service_id" x-model="serviceId" @change="serviceChanged" required class="erp-input mt-1 w-full"><option value="">Choose service</option>@foreach($services as $service)<option value="{{ $service->id }}">{{ $service->name_en }}{{ $service->authority?' · '.$service->authority->name_en:'' }}</option>@endforeach</select></label></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>04 · Auto-filled profile</h2><p>Stored identity data is reused and its source remains visible.</p></div><span class="rounded-full bg-blue-50 px-3 py-1 text-[10px] font-bold text-blue-700">Customer Profile + Current Documents</span></div><div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4"><template x-for="[label,value] in profileEntries" :key="'auto'+label"><div class="rounded-xl border border-slate-200 p-3"><small class="text-slate-400" x-text="label"></small><strong class="mt-1 block text-sm" x-text="value||'Missing'"></strong></div></template></div></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>05 · Required document check</h2><p>Current vault documents are classified as valid, expired, missing or pending verification.</p></div><a x-show="selectedCustomer" :href="`{{ url('/app/customers') }}/${selectedCustomer?.id}#documents`">Upload missing document</a></div><div class="mt-4 space-y-2"><template x-for="doc in context.document_checks||[]" :key="doc.id"><div class="flex items-center justify-between rounded-xl border border-slate-200 p-3"><div><strong class="text-sm" x-text="doc.name"></strong><small class="ml-2 text-slate-400" x-text="doc.mandatory?'Mandatory':'Optional'"></small><p x-show="doc.expiry_date" class="text-[10px] text-slate-500" x-text="'Expiry '+doc.expiry_date"></p></div><span class="rounded-full px-2 py-1 text-[10px] font-bold" :class="doc.status==='valid'?'bg-emerald-50 text-emerald-700':doc.status==='expired'?'bg-red-50 text-red-700':'bg-amber-50 text-amber-700'" x-text="doc.status.replaceAll('_',' ').toUpperCase()"></span></div></template><p x-show="serviceId&&!(context.document_checks||[]).length" class="rounded-xl bg-emerald-50 p-3 text-xs text-emerald-700">This service has no configured document checklist.</p><label x-show="context.can_continue===false" class="mt-3 flex gap-2 rounded-xl border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800"><input type="checkbox" x-model="allowMissing">Continue as Documents Pending and request the missing/expired documents before submission.</label></div></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>06 · Dynamic service fields</h2><p>Conditional service configuration remains versioned with the application.</p></div></div><div class="mt-4 grid gap-3 md:grid-cols-2"><template x-for="field in context.form_fields||[]" :key="field.key"><label class="text-xs font-bold"><span x-text="field.label"></span><span x-show="field.required" class="text-red-500"> *</span><template x-if="field.type==='textarea'"><textarea :name="`form_values[${field.key}]`" :required="field.required" class="erp-input mt-1 w-full"></textarea></template><template x-if="field.type==='dropdown'||field.type==='select'"><select :name="`form_values[${field.key}]`" :required="field.required" class="erp-input mt-1 w-full"><option value="">Select</option><template x-for="option in field.options||[]"><option :value="option.value||option" x-text="option.label||option"></option></template></select></template><template x-if="!['textarea','dropdown','select'].includes(field.type)"><input :name="`form_values[${field.key}]`" :type="field.type==='date'?'date':field.type==='number'?'number':'text'" :required="field.required" :readonly="field.readonly" :value="field.default||''" class="erp-input mt-1 w-full"></template></label></template><p x-show="serviceId&&!(context.form_fields||[]).length" class="text-xs text-slate-500">No additional fields configured for this service.</p></div></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>07 · Fees</h2><p>Government pass-through is never classified as revenue.</p></div><span x-show="feeLoading" class="text-xs text-blue-600">Calculating…</span></div><div class="mt-4 grid gap-3 sm:grid-cols-5">@foreach([['gov_fee','Government / Pass-through'],['typing_fee','Typing revenue'],['service_charge','Service revenue'],['vat_amount','VAT'],['total_price','Total customer pays']] as [$key,$label])<div class="rounded-xl bg-slate-50 p-3"><small>{{ $label }}</small><strong class="mt-1 block" x-text="money(fees.{{ $key }})"></strong></div>@endforeach</div></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>08 · Payment intent</h2><p>The configured invoice rule creates the auditable draft automatically.</p></div></div><div class="mt-4 grid gap-3 sm:grid-cols-4">@foreach(['pay_now'=>'Pay now','pay_later'=>'Pay later','corporate_credit'=>'Corporate credit','partial_payment'=>'Partial payment'] as $key=>$label)<label class="rounded-xl border border-slate-200 p-3 text-xs font-bold"><input type="radio" name="payment_mode" value="{{ $key }}" @checked($key==='pay_later')> {{ $label }}</label>@endforeach</div></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>09 · Priority and SLA</h2><p>Set urgency and an optional promised due time.</p></div></div><div class="mt-4 grid gap-3 md:grid-cols-2"><label class="text-xs font-bold">Priority<select name="priority" x-model="priority" @change="loadFees" class="erp-input mt-1 w-full"><option value="normal">Normal</option><option value="high">High</option><option value="urgent">Urgent</option><option value="vip">VIP</option></select></label><label class="text-xs font-bold">Due date and time<input name="due_at" type="datetime-local" class="erp-input mt-1 w-full"></label></div></section>
            <section class="erp-panel"><div class="erp-panel-heading"><div><h2>10 · Assignment</h2><p>Manual typist selection includes live workload; history is immutable.</p></div></div><div class="mt-4 grid gap-3 md:grid-cols-2"><label class="text-xs font-bold">Assignment mode<select name="assignment_mode" class="erp-input mt-1 w-full"><option value="manual">Manual typist</option><option value="least_workload">Least workload</option><option value="round_robin">Round robin</option><option value="department_queue">Department queue</option><option value="branch_queue">Branch queue</option></select></label><label class="text-xs font-bold">Assigned typist<select name="assigned_user_id" class="erp-input mt-1 w-full"><option value="">Intake creator / queue</option>@foreach($typists as $typist)<option value="{{ $typist->id }}">{{ $typist->name }} · {{ $typist->active_workload }} active{{ $typists->min('active_workload')===$typist->active_workload?' · Recommended':'' }}</option>@endforeach</select></label><label class="text-xs font-bold md:col-span-2">Internal desk notes<textarea name="notes" class="erp-input mt-1 w-full" rows="3" placeholder="Notes for typist, reception or supervisor"></textarea></label></div></section>
        </div>
        <aside class="h-fit rounded-3xl border border-slate-200 bg-white p-5 shadow-sm xl:sticky xl:top-24"><p class="text-[10px] font-bold uppercase tracking-[.18em] text-emerald-600">Creation review</p><h2 class="mt-1 font-bold text-slate-950">Ready to create</h2><div class="mt-4 space-y-3 text-xs"><div class="flex justify-between"><span>Customer</span><strong x-text="selectedCustomer?.full_name_en||'Not selected'"></strong></div><div class="flex justify-between"><span>Applicant</span><strong x-text="applicantType.replaceAll('_',' ')"></strong></div><div class="flex justify-between"><span>Documents</span><strong x-text="context.can_continue===false?'Pending':'Ready'"></strong></div><div class="flex justify-between border-t border-slate-200 pt-3"><span>Total</span><strong class="text-lg text-emerald-700" x-text="money(fees.total_price)"></strong></div></div><button :disabled="!selectedCustomer||!serviceId||feeLoading||(context.can_continue===false&&!allowMissing)" class="mt-5 w-full rounded-xl bg-emerald-600 px-5 py-3 text-sm font-bold text-white disabled:cursor-not-allowed disabled:opacity-50">Create application and audit trail</button><p class="mt-3 text-[10px] leading-5 text-slate-500">Creates the application number, document links, fee snapshot, invoice rule result, assignment, status history, activity and notification.</p></aside>
    </form>
</div>
<script>
function applicationWizard(){return{searchQuery:'',results:[],searched:false,loading:false,selectedCustomer:@json($selectedCustomer),serviceId:@json(old('service_id','')),applicantType:@json(old('applicant_type','individual')),familyMemberId:'',companyId:@json(old('company_id','')),corporateEmployeeId:'',priority:@json(old('priority','normal')),allowMissing:true,context:{profile:null,family:[],document_checks:[],form_fields:[],can_continue:true},fees:{gov_fee:0,typing_fee:0,service_charge:0,vat_amount:0,total_price:0},feeLoading:false,companies:@json($companies),init(){if(this.selectedCustomer)this.loadContext();},get corporateEmployees(){let company=this.companies.find(c=>String(c.id)===String(this.companyId));return company?.corporate_employees||[];},get profileEntries(){let p=this.context.profile||{};return[['Name',p.name],['Mobile',p.mobile],['Nationality',p.nationality],['Passport',p.passport],['Emirates ID',p.emirates_id],['Visa',p.visa],['UID',p.uid],['Sponsor',p.sponsor]];},async searchCustomers(){if(this.searchQuery.trim().length<2){this.results=[];return;}this.loading=true;try{let r=await fetch(`{{ route('app.applications.search_customer') }}?query=${encodeURIComponent(this.searchQuery)}`,{headers:{Accept:'application/json'}});let d=await r.json();this.results=d.customers||[];this.searched=true;}finally{this.loading=false;}},chooseCustomer(c){this.selectedCustomer=c;this.results=[];this.searchQuery='';this.familyMemberId='';this.loadContext();},clearCustomer(){this.selectedCustomer=null;this.context={profile:null,family:[],document_checks:[],form_fields:[],can_continue:true};},customerMobile(c){return c?.primary_mobile||c?.contact?.primary_mobile||'No mobile';},applicantChanged(){this.familyMemberId='';this.companyId='';this.corporateEmployeeId='';this.loadContext();this.loadFees();},companyChanged(){this.corporateEmployeeId='';this.loadFees();},serviceChanged(){this.loadContext();this.loadFees();},async loadContext(){if(!this.selectedCustomer)return;let q=new URLSearchParams({customer_id:this.selectedCustomer.id});if(this.serviceId)q.set('service_id',this.serviceId);if(this.familyMemberId)q.set('family_member_id',this.familyMemberId);if(this.corporateEmployeeId)q.set('corporate_employee_id',this.corporateEmployeeId);let r=await fetch(`{{ route('app.applications.intake_context') }}?${q}`,{headers:{Accept:'application/json'}});if(r.ok)this.context=await r.json();},async loadFees(){if(!this.serviceId)return;this.feeLoading=true;try{let r=await fetch(`{{ route('app.applications.calculate_fees') }}`,{method:'POST',headers:{'Content-Type':'application/json',Accept:'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify({service_id:this.serviceId,priority:this.priority,company_id:this.companyId||null})});if(r.ok)this.fees=await r.json();}finally{this.feeLoading=false;}},money(v){return'AED '+Number(v||0).toLocaleString('en-AE',{minimumFractionDigits:2,maximumFractionDigits:2});}}}
</script>
@endsection