@extends('layouts.app')
@section('title','Detail Order Servis')
@section('page-title','Detail Order Servis')

@push('head')
<style>
.ss-wrap{position:relative}
.ss-input{width:100%;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;background:#fff;outline:none;box-sizing:border-box;line-height:1.4}
.ss-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.ss-dropdown{position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.11);z-index:9999;max-height:220px;overflow-y:auto}
.ss-item{padding:7px 11px;cursor:pointer;font-size:.875rem;line-height:1.35;border-bottom:1px solid #f3f4f6;user-select:none}
.ss-item:last-child{border-bottom:none}
.ss-item:hover{background:#eff6ff}
.ss-empty{padding:9px 11px;color:#9ca3af;font-size:.84rem}
.ss-sub{font-size:.77rem;color:#9ca3af;margin-top:1px}
</style>
@endpush

@section('content')
@php
    $phone = preg_replace('/[^0-9]/', '', $order->customer?->phone ?? '');
    if ($phone && str_starts_with($phone, '0')) $phone = '62' . substr($phone, 1);
    $spTotal   = $order->sparparts->sum('subtotal');
    $chTotal   = $order->charges->sum('amount');
    $finalCost = $order->final_cost ?? $order->calculateFinalCost();
    $waLines   = [];
    $waLines[] = "Halo {$order->customer?->name},";
    $waLines[] = "";
    $waLines[] = "Berikut informasi servis Anda di GMComp:";
    $waLines[] = "";
    $waLines[] = "📋 No. Nota: {$order->order_number}";
    $waLines[] = "📅 Tanggal Masuk: {$order->received_at->format('d/m/Y')}";
    $waLines[] = "💻 Perangkat: {$order->device_type} {$order->device_brand} {$order->device_model}";
    $waLines[] = "🔧 Keluhan: {$order->complaint}";
    $waLines[] = "✅ Status: {$order->status_label}";
    $waLines[] = "";
    $waLines[] = "💰 Rincian Biaya:";
    if ($spTotal > 0)  $waLines[] = "- Sparepart: Rp " . number_format($spTotal, 0, ',', '.');
    if ($chTotal > 0)  $waLines[] = "- Jasa Servis: Rp " . number_format($chTotal, 0, ',', '.');
    $waLines[] = "- *TOTAL: Rp " . number_format($finalCost, 0, ',', '.') . "*";
    $waLines[] = "";
    $waLines[] = "🛡️ Garansi servis: {$order->warranty_service_days} hari";
    $waLines[] = "";
    $waLines[] = "Terima kasih sudah mempercayakan perangkat Anda ke GMComp 🙏";
    $waMsg = implode("\n", $waLines);
    $waUrl = $phone ? "https://wa.me/{$phone}?text=" . rawurlencode($waMsg) : null;
@endphp

<div class="max-w-4xl space-y-4">

{{-- Header --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-3">
        <div>
            <h2 class="text-lg font-bold text-gray-800">{{ $order->order_number }}</h2>
            <p class="text-gray-500 text-sm">Masuk: {{ $order->received_at->format('d F Y, H:i') }}</p>
            @if($order->estimated_finish)
            <p class="text-sm mt-0.5"><span class="text-gray-400 text-xs">Est. Selesai:</span> <span class="font-medium text-blue-700">{{ $order->estimated_finish->format('d F Y, H:i') }}</span></p>
            @endif
        </div>
        @php $c=$order->status_color @endphp
        <span class="text-sm font-semibold px-3 py-1.5 rounded-full bg-{{ $c }}-100 text-{{ $c }}-700 self-start">{{ $order->status_label }}</span>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4 pt-4 border-t border-gray-100 text-sm">
        <div><span class="text-gray-400 text-xs">Pelanggan</span><p class="font-medium text-gray-800 mt-0.5">{{ $order->customer?->name }}</p>
            @if($order->customer?->phone)<p class="text-gray-500 text-xs">{{ $order->customer->phone }}</p>@endif
        </div>
        <div><span class="text-gray-400 text-xs">Perangkat</span><p class="font-medium text-gray-800 mt-0.5">{{ $order->device_type }} {{ $order->device_brand }}</p></div>
        <div><span class="text-gray-400 text-xs">Model</span><p class="text-gray-700 mt-0.5">{{ $order->device_model ?: '-' }}</p></div>
        <div><span class="text-gray-400 text-xs">S/N</span><p class="text-gray-700 mt-0.5 font-mono text-xs">{{ $order->serial_number ?: '-' }}</p></div>
        <div><span class="text-gray-400 text-xs">Teknisi</span><p class="font-medium text-gray-800 mt-0.5">{{ $order->technician?->name ?? 'Belum Ditentukan' }}</p></div>
        <div><span class="text-gray-400 text-xs">Kondisi Fisik</span><p class="text-gray-700 mt-0.5">{{ $order->device_condition ?: '-' }}</p></div>
        <div><span class="text-gray-400 text-xs">Kelengkapan</span><p class="text-gray-700 mt-0.5">{{ $order->accessories ?: '-' }}</p></div>
        <div><span class="text-gray-400 text-xs">Est. Biaya</span><p class="font-medium text-gray-800 mt-0.5">Rp {{ number_format($order->estimated_cost,0,',','.') }}</p></div>
        @if($order->device_password)
        <div class="col-span-2"><span class="text-gray-400 text-xs">Password / PIN</span>
            <p class="text-gray-700 mt-0.5 font-mono">
                <span id="pw-display">••••••••</span>
                <button type="button" onclick="togglePw()" class="ml-2 text-xs text-blue-500 hover:text-blue-700">Tampilkan</button>
                <span id="pw-value" class="hidden">{{ $order->device_password }}</span>
            </p>
        </div>
        @endif
    </div>

    <div class="mt-3 pt-3 border-t border-gray-100 text-sm">
        <span class="text-gray-400 text-xs">Keluhan</span>
        <p class="text-gray-700 mt-0.5">{{ $order->complaint }}</p>
    </div>
</div>

{{-- Status Actions --}}
@if($order->isEditable())
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
    <h3 class="text-sm font-semibold text-gray-700 mb-3">Aksi</h3>
    <div class="flex flex-wrap gap-2">

        @if(auth()->user()->hasRole(['superadmin','owner','admin']))
        <form method="POST" action="{{ route('service-orders.assign',$order) }}" class="flex gap-2 items-center">
            @csrf
            <select name="technician_id" class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">— Pilih Teknisi —</option>
                @foreach($technicians as $t)<option value="{{ $t->id }}" {{ $order->technician_id==$t->id?'selected':'' }}>{{ $t->name }}</option>@endforeach
            </select>
            <button type="submit" class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm px-3 py-1.5 rounded-lg transition">Tetapkan</button>
        </form>
        @endif

        <form method="POST" action="{{ route('service-orders.status',$order) }}" class="flex gap-2 items-center">
            @csrf
            <select name="status" class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                @foreach(['menunggu'=>'Menunggu','didiagnosa'=>'Didiagnosa','dalam_perbaikan'=>'Dalam Perbaikan','menunggu_sparepart'=>'Menunggu Sparepart','siap_diambil'=>'Siap Diambil','dibatalkan'=>'Dibatalkan'] as $val=>$lbl)
                <option value="{{ $val }}" {{ $order->status===$val?'selected':'' }}>{{ $lbl }}</option>
                @endforeach
            </select>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-3 py-1.5 rounded-lg transition">Update Status</button>
        </form>
    </div>
</div>
@endif

{{-- Diagnosis --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
    <h3 class="text-sm font-semibold text-gray-700 mb-3">Diagnosa Teknisi</h3>
    @if($order->diagnosis)
    <div class="text-sm space-y-2 bg-gray-50 rounded-lg p-3">
        <p><span class="text-gray-400">Diagnosa:</span> <span class="text-gray-800">{{ $order->diagnosis->diagnosis }}</span></p>
        @if($order->diagnosis->action_plan)<p><span class="text-gray-400">Tindakan:</span> <span class="text-gray-800">{{ $order->diagnosis->action_plan }}</span></p>@endif
        @if($order->diagnosis->estimated_cost)<p><span class="text-gray-400">Est. Biaya:</span> <span class="text-gray-800">Rp {{ number_format($order->diagnosis->estimated_cost,0,',','.') }}</span></p>@endif
        <p class="text-gray-400 text-xs">{{ $order->diagnosis->diagnosed_at?->format('d/m/Y H:i') }}</p>
    </div>
    @else<p class="text-gray-400 text-sm">Belum ada diagnosa.</p>@endif

    @if($order->technician_notes)
    <div class="mt-3 pt-3 border-t border-gray-100">
        <p class="text-xs text-gray-400">Catatan Teknisi</p>
        <p class="text-sm text-gray-700 mt-1">{{ $order->technician_notes }}</p>
    </div>
    @endif

    @if($order->isEditable())
    <form method="POST" action="{{ route('service-orders.diagnosis',$order) }}" class="mt-4 pt-4 border-t border-gray-100 space-y-3">
        @csrf
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">Hasil Diagnosa <span class="text-red-500">*</span></label>
            <textarea name="diagnosis" rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ $order->diagnosis?->diagnosis }}</textarea>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Tindakan yang Dilakukan</label>
                <input type="text" name="action_plan" value="{{ $order->diagnosis?->action_plan }}" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Estimasi Biaya</label>
                <input type="number" name="estimated_cost" value="{{ $order->diagnosis?->estimated_cost }}" min="0" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none">
            </div>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">Catatan Tambahan Teknisi</label>
            <textarea name="technician_notes" rows="2" placeholder="Kondisi setelah perbaikan, saran perawatan, dll" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ $order->technician_notes }}</textarea>
        </div>
        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm px-4 py-1.5 rounded-lg transition">Simpan Diagnosa</button>
    </form>
    @endif
</div>

{{-- Spareparts --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
        <h3 class="text-sm font-semibold text-gray-700">Sparepart Digunakan</h3>
        <span class="text-sm font-medium text-gray-600">Rp {{ number_format($order->sparparts->sum('subtotal'),0,',','.') }}</span>
    </div>
    <table class="w-full text-sm">
        <tbody class="divide-y divide-gray-50">
            @forelse($order->sparparts as $sp)
            <tr>
                <td class="px-4 py-2 text-gray-700">{{ $sp->product?->name }}</td>
                <td class="px-4 py-2 text-right text-gray-500">{{ $sp->quantity }} × Rp {{ number_format($sp->unit_price,0,',','.') }}</td>
                <td class="px-4 py-2 text-right font-medium text-gray-800">Rp {{ number_format($sp->subtotal,0,',','.') }}</td>
                @if($order->isEditable())
                <td class="px-4 py-2 w-10">
                    <form method="POST" action="{{ route('service-orders.sparparts.remove',[$order,$sp]) }}" onsubmit="return confirm('Hapus sparepart ini?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-red-400 hover:text-red-600 text-xs">Hapus</button>
                    </form>
                </td>
                @endif
            </tr>
            @empty
            <tr><td colspan="4" class="px-4 py-6 text-center text-gray-400 text-sm">Belum ada sparepart.</td></tr>
            @endforelse
        </tbody>
    </table>

    @if($order->isEditable())
    <form method="POST" action="{{ route('service-orders.sparparts',$order) }}" class="px-5 py-4 border-t border-gray-100 bg-gray-50 flex flex-wrap gap-3 items-end">
        @csrf
        <div class="flex-1 min-w-40">
            <label class="block text-xs font-medium text-gray-600 mb-1">Produk / Sparepart</label>
            <div class="ss-wrap">
                <input type="text" id="sp-search" autocomplete="off" placeholder="Cari atau pilih produk/sparepart…" class="ss-input">
                <input type="hidden" name="product_id" id="sp-hidden">
                <div id="sp-dropdown" class="ss-dropdown" style="display:none"></div>
            </div>
        </div>
        <div class="w-24">
            <label class="block text-xs font-medium text-gray-600 mb-1">Qty</label>
            <input type="number" name="quantity" value="1" min="1" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
        </div>
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-lg transition">Tambah</button>
    </form>
    @endif
</div>

{{-- Service Charges --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
        <h3 class="text-sm font-semibold text-gray-700">Biaya Servis</h3>
        <span class="text-sm font-medium text-gray-600">Rp {{ number_format($order->charges->sum('amount'),0,',','.') }}</span>
    </div>
    <table class="w-full text-sm">
        <tbody class="divide-y divide-gray-50">
            @forelse($order->charges as $ch)
            <tr>
                <td class="px-4 py-2 text-gray-700">{{ $ch->description }}</td>
                <td class="px-4 py-2 text-right font-medium text-gray-800">Rp {{ number_format($ch->amount,0,',','.') }}</td>
                @if($order->isEditable())
                <td class="px-4 py-2 w-10">
                    <form method="POST" action="{{ route('service-orders.charges.remove',[$order,$ch->id]) }}" onsubmit="return confirm('Hapus biaya ini?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-red-400 hover:text-red-600 text-xs">Hapus</button>
                    </form>
                </td>
                @endif
            </tr>
            @empty
            <tr><td colspan="3" class="px-4 py-6 text-center text-gray-400 text-sm">Belum ada biaya servis.</td></tr>
            @endforelse
        </tbody>
    </table>

    @if($order->isEditable())
    <form method="POST" action="{{ route('service-orders.charges',$order) }}" class="px-5 py-4 border-t border-gray-100 bg-gray-50 flex flex-wrap gap-3 items-end">
        @csrf
        <div class="flex-1 min-w-40">
            <label class="block text-xs font-medium text-gray-600 mb-1">Keterangan Biaya</label>
            <input type="text" name="description" placeholder="Biaya diagnosa, jasa ganti, dll" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
        </div>
        <div class="w-36">
            <label class="block text-xs font-medium text-gray-600 mb-1">Jumlah</label>
            <input type="number" name="amount" value="0" min="0" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
        </div>
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-lg transition">Tambah</button>
    </form>
    @endif
</div>

{{-- Garansi --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-2">
        <h3 class="text-sm font-semibold text-gray-700">Garansi</h3>
        <div class="flex gap-5 text-sm text-gray-600">
            <span>Garansi Servis: <strong class="text-gray-800">{{ $order->warranty_service_days }} hari</strong></span>
            <span>Garansi Sparepart: <strong class="text-gray-800">{{ $order->warranty_part_days }} hari</strong></span>
        </div>
    </div>
    @if($order->isEditable())
    <form method="POST" action="{{ route('service-orders.warranty', $order) }}" class="border-t border-gray-100 pt-4 flex flex-wrap gap-3 items-end">
        @csrf @method('PATCH')
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">Masa Garansi Servis (hari)</label>
            <input type="number" name="warranty_service_days" value="{{ $order->warranty_service_days }}" min="0" max="365"
                   class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-40 focus:outline-none focus:ring-2 focus:ring-teal-500">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">Masa Garansi Sparepart (hari)</label>
            <input type="number" name="warranty_part_days" value="{{ $order->warranty_part_days }}" min="0" max="365"
                   class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-40 focus:outline-none focus:ring-2 focus:ring-teal-500">
        </div>
        <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white text-sm px-4 py-2 rounded-lg transition">Simpan Garansi</button>
    </form>
    @endif
</div>

{{-- Total & Complete --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-gray-700">Ringkasan Biaya</h3>
        <div class="text-right">
            <p class="text-xs text-gray-400">Total Biaya</p>
            <p class="text-xl font-bold text-gray-900">Rp {{ number_format($finalCost,0,',','.') }}</p>
        </div>
    </div>

    @if($order->status === 'siap_diambil' && !$order->payment)
    <form method="POST" action="{{ route('service-orders.complete',$order) }}" class="border-t pt-4 space-y-3">
        @csrf
        <div class="flex flex-wrap gap-3 items-end">
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Metode Pembayaran</label>
                <select name="payment_method" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                    <option value="tunai">Tunai</option>
                    <option value="transfer">Transfer Bank</option>
                    <option value="qris">QRIS</option>
                    <option value="kartu">Kartu Debit / Kredit</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Jumlah Dibayar (Rp)</label>
                <input type="number" name="paid_amount" min="0" placeholder="Kosongkan jika pas"
                       class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-44 focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">No. Referensi</label>
                <input type="text" name="reference_number" placeholder="Opsional"
                       class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-36 focus:outline-none">
            </div>
            <button type="submit" onclick="return confirm('Selesaikan order dan catat pembayaran?')"
                    class="bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-5 py-2 rounded-lg transition">
                ✓ Selesaikan & Catat Pembayaran
            </button>
        </div>
    </form>
    @elseif($order->payment)
    <div class="border-t pt-4 space-y-1.5 text-sm">
        <div class="flex flex-wrap gap-x-6 gap-y-1 text-gray-600">
            <span>No. Bayar: <strong class="text-gray-800">{{ $order->payment->payment_number }}</strong></span>
            <span>Metode: <strong class="text-gray-800">{{ ucfirst(str_replace('_',' ',$order->payment->payment_method)) }}</strong></span>
            <span>{{ $order->payment->created_at->format('d/m/Y H:i') }}</span>
        </div>
        @if($order->change_amount > 0)
        <p class="text-sm text-gray-600">Kembalian: <strong class="text-gray-800">Rp {{ number_format($order->change_amount,0,',','.') }}</strong></p>
        @endif
    </div>
    @endif
</div>

{{-- Bottom Actions --}}
<div class="flex flex-wrap gap-3">
    <a href="{{ route('service-orders.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition">← Kembali</a>
    <a href="{{ route('service-orders.print', $order) }}" target="_blank" class="bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition">🖨 Cetak Nota Servis</a>
    @if($waUrl)
    <a id="wa-send-btn" href="{{ $waUrl }}" target="_blank"
       onclick="markWASent({{ $order->id }}, this)"
       class="bg-green-600 hover:bg-green-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition flex items-center gap-1.5">
        📲 Kirim WA ke Pelanggan
        @if($order->wa_sent_at)
        <span class="text-xs opacity-80">({{ $order->wa_sent_at->format('d/m H:i') }})</span>
        @endif
    </a>
    @elseif(!$phone)
    <span class="bg-gray-100 text-gray-400 text-sm px-4 py-2 rounded-lg cursor-not-allowed" title="Nomor WA pelanggan tidak tersedia">📲 Kirim WA</span>
    @endif
</div>

</div>

@php
    $sparepartsData = $spareparts->map(fn($sp) => ['id' => $sp->id, 'name' => $sp->name, 'code' => $sp->code ?? '', 'stock' => (int) $sp->stock]);
@endphp
@push('scripts')
<script>
const spData = @json($sparepartsData);

function positionDropdown(input, dd) {
    var r = input.getBoundingClientRect();
    dd.style.top = (r.bottom + 2) + 'px';
    dd.style.left = r.left + 'px';
    dd.style.width = r.width + 'px';
}
function safeEsc(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

function initSpSearch() {
    var input  = document.getElementById('sp-search');
    var hidden = document.getElementById('sp-hidden');
    var dd     = document.getElementById('sp-dropdown');
    if (!input) return;
    function render(q) {
        var list = q
            ? spData.filter(p => (p.name + ' ' + p.code).toLowerCase().includes(q.toLowerCase()))
            : spData;
        dd.innerHTML = list.length
            ? list.map(p =>
                '<div class="ss-item" data-id="'+p.id+'" data-name="'+safeEsc(p.name+(p.code?' ['+p.code+']':''))+'">'+
                safeEsc(p.name)+(p.code ? '<span style="color:#9ca3af;font-size:.8em"> ['+safeEsc(p.code)+']</span>' : '')+
                '<div class="ss-sub">Stok: '+p.stock+'</div>'+
                '</div>').join('')
            : '<div class="ss-empty">Data tidak ditemukan</div>';
        dd.querySelectorAll('.ss-item').forEach(function(el) {
            el.addEventListener('mousedown', function(e) {
                e.preventDefault(); hidden.value = el.dataset.id; input.value = el.dataset.name; dd.style.display = 'none';
            });
        });
        positionDropdown(input, dd); dd.style.display = 'block';
    }
    input.addEventListener('focus', function() { render(input.value); });
    input.addEventListener('input', function() { render(input.value); hidden.value = ''; });
    input.addEventListener('blur', function() { setTimeout(function() { dd.style.display = 'none'; }, 220); });
}

document.addEventListener('DOMContentLoaded', function() { initSpSearch(); });
</script>
@endpush

<script>
function togglePw() {
    const d = document.getElementById('pw-display');
    const v = document.getElementById('pw-value');
    if (d.textContent === '••••••••') {
        d.textContent = v.textContent;
    } else {
        d.textContent = '••••••••';
    }
}

function markWASent(id, btn) {
    fetch('/service-orders/' + id + '/whatsapp', {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json'}
    }).then(r => r.json()).then(data => {
        if (data.ok && btn) {
            btn.classList.remove('bg-green-600', 'hover:bg-green-700');
            btn.classList.add('bg-green-700');
            const span = document.createElement('span');
            span.className = 'text-xs opacity-80';
            span.textContent = '(' + data.sent_at + ')';
            btn.appendChild(span);
        }
    }).catch(() => {});
}
</script>
@endsection