@extends('layouts.app')
@section('title', 'Edit Order Servis')
@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css">
<style>.ts-wrapper { min-width: 0; } .ts-control { min-height: 36px; }</style>
@endsection
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('service-orders.index') }}">Order Servis</a></li>
    <li class="breadcrumb-item"><a href="{{ route('service-orders.show', $serviceOrder) }}">{{ $serviceOrder->order_number }}</a></li>
    <li class="breadcrumb-item active">Edit</li>
@endsection
@section('content')
<div class="page-header">
    <h4><i class="bi bi-pencil-square me-2 text-warning"></i>Edit Order: {{ $serviceOrder->order_number }}</h4>
</div>

<form method="POST" action="{{ route('service-orders.update', $serviceOrder) }}">
@csrf @method('PUT')
<div class="row g-3">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header py-3"><h6 class="mb-0 fw-bold">Update Status & Penugasan</h6></div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Status <span class="text-danger">*</span></label>
                    <select name="status" class="form-select" required>
                        @foreach(['pending'=>'Menunggu','diagnosa'=>'Diagnosa','proses'=>'Proses','menunggu_part'=>'Menunggu Part','selesai'=>'Selesai','diambil'=>'Diambil','batal'=>'Dibatalkan'] as $val => $label)
                        <option value="{{ $val }}" {{ $serviceOrder->status === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Jenis Servis</label>
                    <select name="service_type" class="form-select">
                        @foreach(['carry_in'=>'Carry-In','in_home'=>'In-Home','warranty'=>'Warranty','tour_service'=>'Tour Service'] as $val=>$label)
                        <option value="{{ $val }}" {{ $serviceOrder->service_type === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label">Teknisi Utama</label>
                        <select name="technician_id" class="form-select">
                            <option value="">-- Belum --</option>
                            @foreach($technicians as $tech)
                            <option value="{{ $tech->id }}" {{ $serviceOrder->technician_id == $tech->id ? 'selected' : '' }}>
                                {{ $tech->user->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Helper</label>
                        <select name="helper_id" class="form-select">
                            <option value="">-- Tanpa Helper --</option>
                            @foreach($technicians as $tech)
                            <option value="{{ $tech->id }}" {{ $serviceOrder->helper_id == $tech->id ? 'selected' : '' }}>
                                {{ $tech->user->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label">Estimasi Biaya</label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number" name="estimated_cost" class="form-control" value="{{ $serviceOrder->estimated_cost }}" min="0">
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Biaya Aktual</label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number" name="actual_cost" class="form-control" value="{{ $serviceOrder->actual_cost }}" min="0">
                        </div>
                    </div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label">Ongkos Transport</label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number" name="transport_cost" class="form-control" value="{{ $serviceOrder->transport_cost }}" min="0">
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Jarak</label>
                        <div class="input-group">
                            <input type="number" name="distance_km" class="form-control" value="{{ $serviceOrder->distance_km }}" min="0" step="0.1">
                            <span class="input-group-text">km</span>
                        </div>
                    </div>
                </div>
                <div>
                    <label class="form-label">Alasan Pending</label>
                    <textarea name="pending_reason" class="form-control" rows="2" placeholder="Isi jika status Menunggu Part / pending...">{{ $serviceOrder->pending_reason }}</textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header py-3"><h6 class="mb-0 fw-bold">Jadwal</h6></div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Tgl Confirm Call</label>
                    <input type="date" name="confirmation_call_date" class="form-control" value="{{ $serviceOrder->confirmation_call_date?->format('Y-m-d') }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Estimasi Selesai</label>
                    <input type="date" name="estimated_completion" class="form-control" value="{{ $serviceOrder->estimated_completion?->format('Y-m-d') }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Tanggal Selesai</label>
                    <input type="date" name="completion_date" class="form-control" value="{{ $serviceOrder->completion_date?->format('Y-m-d') }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Tanggal Diambil</label>
                    <input type="date" name="delivery_date" class="form-control" value="{{ $serviceOrder->delivery_date?->format('Y-m-d') }}">
                </div>
                <div>
                    <label class="form-label">Catatan</label>
                    <textarea name="notes" class="form-control" rows="3">{{ $serviceOrder->notes }}</textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- Informasi Perangkat --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header py-3"><h6 class="mb-0 fw-bold"><i class="bi bi-cpu me-2"></i>Data Perangkat</h6></div>
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-md-6">
                        <label class="form-label">Brand / Merk</label>
                        <select name="brand" id="brand-select" class="form-select">
                            <option value="">-- Pilih Merk --</option>
                            @foreach($brands as $brand)
                            <option value="{{ $brand->name }}"
                                {{ old('brand', $serviceOrder->brand) == $brand->name ? 'selected' : '' }}>
                                {{ $brand->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Model</label>
                        <select name="model" id="model-select" class="form-select">
                            <option value="">-- Pilih Model --</option>
                            @foreach($deviceModels as $dm)
                            <option value="{{ $dm->name }}"
                                    data-brand="{{ $dm->brand->name ?? '' }}"
                                    {{ old('model', $serviceOrder->model) == $dm->name ? 'selected' : '' }}>
                                {{ $dm->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-warning"><i class="bi bi-check-lg me-1"></i> Perbarui Order</button>
            <a href="{{ route('service-orders.show', $serviceOrder) }}" class="btn btn-outline-secondary">Batal</a>
        </div>
    </div>
</div>
</form>
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script>
const allModelsData = {!! $deviceModels->map(fn($m) => ['value' => $m->name, 'text' => $m->name, 'brand' => $m->brand->name ?? ''])->values()->toJson() !!};

new TomSelect('[name="status"]',       { allowEmptyOption: false });
new TomSelect('[name="technician_id"]',{ allowEmptyOption: true });
const brandTs = new TomSelect('#brand-select', { allowEmptyOption: true, onChange: filterModels });
const modelTs = new TomSelect('#model-select', { allowEmptyOption: true, options: [] });

function filterModels() {
    const bv   = brandTs.getValue();
    const prev = modelTs.getValue();
    modelTs.clearOptions();
    allModelsData
        .filter(m => !bv || m.brand === bv)
        .forEach(m => modelTs.addOption({ value: m.value, text: m.text }));
    modelTs.refreshOptions(false);
    const stillValid = allModelsData.find(m => m.value === prev && (!bv || m.brand === bv));
    modelTs.setValue(stillValid ? prev : '', true);
}
filterModels();

// Restore previously saved model value
@if($serviceOrder->model)
modelTs.addOption({ value: '{{ $serviceOrder->model }}', text: '{{ $serviceOrder->model }}' });
modelTs.setValue('{{ $serviceOrder->model }}', true);
@endif
</script>
@endsection