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

@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-input.is-invalid{border-color:#f87171}
.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-item-muted{color:#6b7280;font-style:italic}
.ss-empty{padding:9px 11px;color:#9ca3af;font-size:.84rem}
.ss-sub{font-size:.77rem;color:#9ca3af;margin-top:1px}
</style>
@endpush

@section('content')
<div class="max-w-3xl">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<form method="POST" action="{{ route('service-orders.store') }}" class="space-y-5">
@csrf

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Pelanggan <span class="text-red-500">*</span></label>
        <div class="ss-wrap">
            <input type="text" id="cust-search" autocomplete="off" placeholder="Cari atau pilih pelanggan…"
                   class="ss-input @error('customer_id') is-invalid @enderror">
            <input type="hidden" name="customer_id" id="cust-hidden" value="{{ old('customer_id') }}">
            <div id="cust-dropdown" class="ss-dropdown" style="display:none"></div>
        </div>
        @error('customer_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal Masuk</label>
        <input type="datetime-local" name="received_at" value="{{ old('received_at', now()->format('Y-m-d\TH:i')) }}"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Jenis Perangkat <span class="text-red-500">*</span></label>
        <input type="text" name="device_type" value="{{ old('device_type') }}" placeholder="Laptop, Printer, dll"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('device_type') border-red-400 @enderror">
        @error('device_type')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Merek</label>
        <input type="text" name="device_brand" value="{{ old('device_brand') }}" placeholder="Asus, HP, Canon..."
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Model / Seri</label>
        <input type="text" name="device_model" value="{{ old('device_model') }}"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Serial Number</label>
        <input type="text" name="serial_number" value="{{ old('serial_number') }}"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Password / PIN Perangkat</label>
        <input type="text" name="device_password" value="{{ old('device_password') }}" placeholder="Kosongkan jika tidak ada"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        <p class="text-xs text-gray-400 mt-1">Disimpan aman, tidak ditampilkan di nota.</p>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Kondisi Fisik</label>
        <input type="text" name="device_condition" value="{{ old('device_condition') }}" placeholder="Penyok, lecet, dll"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Estimasi Selesai</label>
        <input type="datetime-local" name="estimated_finish" value="{{ old('estimated_finish') }}"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
</div>

<div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Keluhan Pelanggan <span class="text-red-500">*</span></label>
    <textarea name="complaint" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('complaint') border-red-400 @enderror">{{ old('complaint') }}</textarea>
    @error('complaint')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>

<div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Kelengkapan</label>
    <textarea name="accessories" rows="2" placeholder="Charger, tas, dll" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('accessories') }}</textarea>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Estimasi Biaya (Rp)</label>
        <input type="number" name="estimated_cost" value="{{ old('estimated_cost',0) }}" min="0"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Teknisi</label>
        <div class="ss-wrap">
            <input type="text" id="tech-search" autocomplete="off" placeholder="Cari atau pilih teknisi…"
                   class="ss-input">
            <input type="hidden" name="technician_id" id="tech-hidden" value="{{ old('technician_id') }}">
            <div id="tech-dropdown" class="ss-dropdown" style="display:none"></div>
        </div>
    </div>
</div>

<div class="flex gap-3 pt-2">
    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-5 py-2 rounded-lg transition">Buat Order</button>
    <a href="{{ route('service-orders.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-5 py-2 rounded-lg transition">Batal</a>
</div>
</form>
</div>
</div>

@php
    $customersData   = $customers->map(fn($c) => ['id' => $c->id, 'name' => $c->name, 'phone' => $c->phone ?? '']);
    $techniciansData = $technicians->map(fn($t) => ['id' => $t->id, 'name' => $t->name]);
@endphp
@push('scripts')
<script>
const soCustomers   = @json($customersData);
const soTechnicians = @json($techniciansData);

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 initCustSearch() {
    var input  = document.getElementById('cust-search');
    var hidden = document.getElementById('cust-hidden');
    var dd     = document.getElementById('cust-dropdown');
    function render(q) {
        var list = q
            ? soCustomers.filter(c => (c.name + ' ' + c.phone).toLowerCase().includes(q.toLowerCase()))
            : soCustomers;
        dd.innerHTML = list.length
            ? list.map(c =>
                '<div class="ss-item" data-id="'+c.id+'" data-name="'+safeEsc(c.name)+'">'+safeEsc(c.name)+
                (c.phone ? '<div class="ss-sub">'+safeEsc(c.phone)+'</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); });
}

function initTechSearch() {
    var input  = document.getElementById('tech-search');
    var hidden = document.getElementById('tech-hidden');
    var dd     = document.getElementById('tech-dropdown');
    function render(q) {
        var empty = [{id:'', name:'— Belum Ditentukan —'}];
        var list  = q
            ? soTechnicians.filter(t => t.name.toLowerCase().includes(q.toLowerCase()))
            : empty.concat(soTechnicians);
        dd.innerHTML = list.length
            ? list.map(t =>
                '<div class="ss-item'+(t.id===''?' ss-item-muted':'')+'" data-id="'+t.id+'" data-name="'+safeEsc(t.name)+'">'+safeEsc(t.name)+'</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.id ? 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() {
    initCustSearch();
    initTechSearch();
    var oldCust = '{{ old('customer_id') }}';
    if (oldCust) { var c = soCustomers.find(x => String(x.id) === oldCust); if (c) document.getElementById('cust-search').value = c.name; }
    var oldTech = '{{ old('technician_id') }}';
    if (oldTech) { var t = soTechnicians.find(x => String(x.id) === oldTech); if (t) document.getElementById('tech-search').value = t.name; }
});
</script>
@endpush
@endsection