@extends('layouts.dashboard')

@section('page_title', 'Order #' . $order->order_number)

@section('dashboard_content')
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
    
    <!-- Left Column: Details & Timeline -->
    <div class="xl:col-span-2 space-y-8">
        <!-- Order Header Card -->
        <div class="glass-panel rounded-3xl p-8 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-64 h-64 bg-emerald/5 rounded-full -mr-32 -mt-32 blur-3xl"></div>
            <div class="relative z-10">
                <div class="flex items-center gap-4 mb-6">
                    <span class="badge {{ $order->status === 'completed' ? 'badge-success' : 'badge-pending' }} px-4 py-1">
                        {{ $order->status }}
                    </span>
                    <span class="text-white/20">•</span>
                    <span class="text-white/60 text-sm">Created {{ $order->created_at->format('M d, Y') }}</span>
                </div>
                <h2 class="text-4xl font-black text-white mb-2">{{ $order->service->name ?? 'Compliance Service' }}</h2>
                <p class="text-white/40 text-lg">{{ $order->package->name ?? 'Custom Service Package' }}</p>
                
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 mt-12 pt-12 border-t border-white/5">
                    <div>
                        <div class="text-[10px] uppercase font-black text-white/20 tracking-widest mb-1">Fee Strategy</div>
                        <div class="text-white font-bold">{{ $order->currency }} {{ number_format($order->total_amount) }}</div>
                    </div>
                    <div>
                        <div class="text-[10px] uppercase font-black text-white/20 tracking-widest mb-1">Paid to Date</div>
                        <div class="text-white font-bold">{{ $order->currency }} {{ number_format($order->paid_amount) }}</div>
                    </div>
                    <div>
                        <div class="text-[10px] uppercase font-black text-white/20 tracking-widest mb-1">Payment Status</div>
                        <div class="text-emerald font-bold uppercase tracking-tighter">{{ $order->payment_status }}</div>
                    </div>
                    <div>
                        <div class="text-[10px] uppercase font-black text-white/20 tracking-widest mb-1">EST. Delivery</div>
                        <div class="text-white/60 font-bold">Standard</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Remarks / Chat -->
        <div class="glass-panel rounded-3xl p-8 flex flex-col h-[500px]">
            <h3 class="text-lg font-bold text-white mb-6">Communication Stream</h3>
            
            <div class="flex-1 overflow-y-auto pr-4 space-y-6 mb-6" id="remark-container">
                @forelse($order->remarks ?? [] as $remark)
                    <div class="flex {{ $remark->user_id === auth()->id() ? 'justify-end' : 'justify-start' }}">
                        <div class="max-w-[80%] p-4 rounded-2xl {{ $remark->user_id === auth()->id() ? 'bg-emerald/10 border border-emerald/20 text-white' : 'bg-white/5 border border-white/10 text-white/80' }}">
                            <div class="text-[10px] font-black uppercase text-white/20 mb-2">
                                {{ $remark->user_id === auth()->id() ? 'You' : 'Texora Admin' }} • {{ $remark->created_at->diffForHumans() }}
                            </div>
                            <p class="text-sm leading-relaxed">{{ $remark->content ?? $remark->message }}</p>
                        </div>
                    </div>
                @empty
                    <div class="h-full flex flex-col items-center justify-center opacity-20 pointer-events-none">
                        <svg class="w-16 h-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                        <p class="text-sm italic">Initialize the conversation below...</p>
                    </div>
                @endforelse
            </div>

            <form action="{{ route('user.orders.remark', $order) }}" method="POST" class="relative">
                @csrf
                <textarea name="message" rows="2" required 
                          class="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-white text-sm focus:ring-emerald focus:border-emerald placeholder-white/20 transition-all pr-24"
                          placeholder="Send a message to your case manager..."></textarea>
                <button type="submit" class="absolute right-3 top-3 bottom-3 px-4 bg-emerald text-white font-black text-[10px] uppercase tracking-widest rounded-xl hover:scale-105 transition-transform">
                    Send
                </button>
            </form>
        </div>
    </div>

    <!-- Right Column: Documents & Payment -->
    <div class="space-y-8">
             <!-- Dual Tracking: Service Fee vs Government Fee -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <!-- 1. Service Fee (Your professional charges) -->
            <div class="glass-panel rounded-3xl p-8 border-emerald/20 bg-gradient-to-br from-emerald/5 to-transparent">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-bold text-white">Service Invoice</h3>
                    <span class="badge {{ $order->payment_status === 'paid' ? 'badge-success' : 'badge-pending' }}">
                        {{ $order->payment_status }}
                    </span>
                </div>
                
                <div class="space-y-4 mb-6">
                    <div class="flex justify-between items-end border-b border-white/5 pb-4">
                        <span class="text-xs text-white/40">Total Amount</span>
                        <span class="text-2xl font-black text-white">{{ number_format($order->total_amount) }} <span class="text-[10px] text-emerald">{{ $order->currency }}</span></span>
                    </div>
                </div>

                @if($order->payment_status === 'unpaid')
                <div class="p-4 bg-emerald/10 border border-emerald/20 rounded-2xl text-[10px] text-emerald font-medium leading-relaxed mb-6">
                    Please complete your service fee payment to expedite the processing of your application.
                </div>
                @endif
                
                <a href="{{ route('user.invoices') }}" class="block w-full py-4 bg-emerald text-white text-center font-black text-[10px] uppercase tracking-widest rounded-xl hover:scale-[1.02] transition-all">
                    View Service Invoice
                </a>
            </div>

            <!-- 2. Government Fee (Department PSID) -->
            <div class="glass-panel rounded-3xl p-8 border-sky-400/20 bg-gradient-to-br from-sky-400/5 to-transparent" x-data="{ openPaymentModal: false }">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-bold text-white">Government PSID</h3>
                    <span class="text-[10px] uppercase font-black tracking-widest {{ $order->government_payment_status === 'paid' ? 'text-emerald' : 'text-sky-400' }}">
                        {{ $order->government_payment_status }}
                    </span>

                    {{-- Reuse simple PSID modal --}}
                    <div x-show="openPaymentModal" class="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-navy-950/90 backdrop-blur-md" style="display: none;">
                        <div @click.away="openPaymentModal = false" class="glass-panel w-full max-w-lg p-10 rounded-[3rem] animate-fade-in relative text-left">
                            <h3 class="text-2xl font-black text-white mb-4 text-center">Confirm Gov Payment</h3>
                            <p class="text-white/40 text-sm mb-8 text-center">Upload receipt (optional) for the department payment.</p>
                            
                            <form action="{{ route('payment.manual.submit', $order) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                                @csrf
                                <div class="space-y-2">
                                    <label class="text-[10px] uppercase font-black text-white/20 tracking-widest">Receipt Screenshot (Optional)</label>
                                    <input type="file" name="screenshot" class="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-white text-sm">
                                </div>
                                <div class="flex gap-4 pt-4">
                                    <button type="button" @click="openPaymentModal = false" class="flex-1 py-4 border border-white/10 text-white/40 font-black text-[10px] uppercase tracking-widest rounded-xl">Cancel</button>
                                    <button type="submit" class="flex-1 py-4 bg-sky-500 text-white font-black text-[10px] uppercase tracking-widest rounded-xl">Notify Admin</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="space-y-3 mb-6">
                    @php 
                        $psids = $order->psid ? array_filter(array_map('trim', explode("\n", $order->psid))) : []; 
                    @endphp
                    
                    @forelse($psids as $psid)
                        <div class="p-4 bg-white/5 rounded-2xl border border-white/5 flex items-center justify-between group">
                            <span class="text-sm font-mono font-bold text-white/80">{{ $psid }}</span>
                            <div class="flex items-center gap-2">
                                <button onclick="copyPSID('{{ $psid }}')" class="p-1.5 hover:bg-white/10 rounded-lg text-white/20 hover:text-white">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                                </button>
                                @if($order->government_payment_status !== 'paid')
                                <button @click="openPaymentModal = true" class="p-1.5 bg-sky-500/10 text-sky-400 rounded-lg hover:bg-sky-500 hover:text-white transition-all text-[9px] font-bold uppercase">Paid</button>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="py-6 text-center text-[10px] text-white/20 italic bg-white/5 rounded-2xl border border-dashed border-white/10">
                            PSID Awaiting Generation...
                        </div>
                    @endforelse
                </div>

                <p class="text-[10px] text-white/30 leading-relaxed italic">
                    Government fees are paid directly to the department via 1Bill/ATM. Marking these as paid will notify our case managers to continue processing.
                </p>
            </div>
        </div>

        <!-- Documents Section -->
        <div class="glass-panel rounded-3xl p-8">
            <div class="flex items-center justify-between mb-8">
                <h3 class="text-lg font-bold text-white">Document Center</h3>
                <span class="text-[10px] px-2 py-1 bg-white/5 text-white/40 rounded italic">Secure Storage</span>
            </div>

            <!-- Part 1: Official Certificates (Uploaded by Admin) -->
            @php 
                $certificates = $order->documents->where('status', 'approved')->whereNotNull('file_path');
                $required = $order->documents->where('status', '!=', 'approved');
            @endphp

            @if($certificates->count() > 0)
            <div class="mb-10">
                <div class="text-[10px] uppercase font-black text-emerald tracking-widest mb-4 flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-emerald"></span>
                    Official Outputs / Certificates
                </div>
                <div class="space-y-3">
                    @foreach($certificates as $doc)
                        <div class="p-5 bg-emerald/5 border border-emerald/20 rounded-2xl flex items-center justify-between group hover:bg-emerald/10 transition-all">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 rounded-xl bg-emerald/20 flex items-center justify-center text-emerald">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </div>
                                <div>
                                    <div class="text-sm font-black text-white">{{ $doc->document_name }}</div>
                                    <div class="text-[10px] text-emerald/60 font-medium">Ready for Download</div>
                                </div>
                            </div>
                            <a href="{{ asset('storage/' . $doc->file_path) }}" target="_blank" download
                               class="bg-emerald text-white p-2 rounded-xl hover:scale-110 transition-transform">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Part 2: Required Documents (From User) -->
            <div class="mb-8">
                <div class="text-[10px] uppercase font-black text-white/20 tracking-widest mb-4">Verification Queue</div>
                <div class="space-y-4">
                    @foreach($required as $doc)
                        <div class="p-4 bg-white/5 border border-white/10 rounded-2xl">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-white/20">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                    </div>
                                    <div>
                                        <div class="text-sm font-bold text-white">{{ $doc->document_name }}</div>
                                        <span class="text-[9px] uppercase font-black {{ $doc->status === 'rejected' ? 'text-red-400' : 'text-white/20' }}">
                                            {{ $doc->status }}
                                        </span>
                                    </div>
                                </div>
                                @if($doc->file_path)
                                    <span class="text-[10px] text-emerald font-bold">Uploaded</span>
                                @else
                                    <form action="{{ route('user.orders.upload', $order) }}" method="POST" enctype="multipart/form-data" class="flex items-center">
                                        @csrf
                                        <input type="hidden" name="document_name" value="{{ $doc->document_name }}">
                                        <label class="cursor-pointer group">
                                            <span class="text-[10px] bg-white text-navy px-3 py-1.5 rounded-lg font-black uppercase hover:bg-emerald hover:text-white transition-colors">Upload</span>
                                            <input type="file" name="file" class="hidden" onchange="this.form.submit()">
                                        </label>
                                    </form>
                                @endif
                            </div>
                            @if($doc->rejection_reason)
                                <div class="mt-2 p-3 bg-red-400/10 border border-red-400/20 rounded-xl text-[11px] text-red-200">
                                    <strong>Instruction:</strong> {{ $doc->rejection_reason }}
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Upload Field (General) -->
            <div class="mt-8 pt-8 border-t border-white/5">
                <form action="{{ route('user.orders.upload', $order) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="document_name" value="Additional Evidence / Document">
                    <label class="w-full h-24 flex flex-col items-center justify-center border-2 border-dashed border-white/10 rounded-3xl cursor-pointer hover:border-emerald/50 hover:bg-emerald/5 transition-all">
                        <svg class="w-6 h-6 text-white/20 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4"/></svg>
                        <span class="text-[10px] font-black uppercase text-white/40 tracking-widest text-center">Upload Any Other Document</span>
                        <input type="file" name="file" class="hidden" onchange="this.form.submit()">
                    </label>
                </form>
            </div>
        </div>

    </div>
</div>

@push('scripts')
<script>
    function copyPSID(value) {
        navigator.clipboard.writeText(value);
        alert('PSID Copied!');
    }
    
    // Auto-scroll chat to bottom
    const container = document.getElementById('remark-container');
    if(container) container.scrollTop = container.scrollHeight;
</script>
@endpush
@endsection