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

<form method="POST" action="{{ route('service-orders.store') }}" id="orderForm">
@csrf
<div class="row g-3">
    {{-- Informasi Pelanggan --}}
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header py-3"><h6 class="mb-0 fw-bold"><i class="bi bi-person me-2"></i>Data Pelanggan</h6></div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Pelanggan <span class="text-danger">*</span></label>
                    <select name="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required>
                        <option value="">-- Pilih Pelanggan --</option>
                        @foreach($customers as $c)
                        <option value="{{ $c->id }}" {{ (old('customer_id', request('customer_id')) == $c->id) ? 'selected' : '' }}>
                            {{ $c->name }} - {{ $c->phone }}
                        </option>
                        @endforeach
                    </select>
                    @error('customer_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="mt-1"><a href="{{ route('customers.create') }}" target="_blank" class="small text-primary"><i class="bi bi-plus-circle me-1"></i>Tambah pelanggan baru</a></div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Jenis Servis <span class="text-danger">*</span></label>
                    <select name="service_type" class="form-select" required>
                        @foreach(['carry_in'=>'Carry-In (antar ke bengkel)','in_home'=>'In-Home (panggilan ke rumah)','warranty'=>'Warranty','tour_service'=>'Tour Service'] as $val=>$label)
                        <option value="{{ $val }}" {{ old('service_type','carry_in') === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label">Tanggal Masuk <span class="text-danger">*</span></label>
                        <input type="date" name="received_date" class="form-control @error('received_date') is-invalid @enderror"
                               value="{{ old('received_date', date('Y-m-d')) }}" required>
                        @error('received_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Tgl Confirm Call</label>
                        <input type="date" name="confirmation_call_date" class="form-control" value="{{ old('confirmation_call_date') }}">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Estimasi Selesai</label>
                    <input type="date" name="estimated_completion" class="form-control" value="{{ old('estimated_completion') }}">
                </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 Ditentukan --</option>
                            @foreach($technicians as $tech)
                            <option value="{{ $tech->id }}" {{ old('technician_id') == $tech->id ? 'selected' : '' }}>
                                {{ $tech->user->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Helper / Asisten</label>
                        <select name="helper_id" class="form-select">
                            <option value="">-- Tanpa Helper --</option>
                            @foreach($technicians as $tech)
                            <option value="{{ $tech->id }}" {{ old('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="{{ old('estimated_cost', 0) }}" min="0">
                        </div>
                    </div>
                    <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="{{ old('transport_cost', 0) }}" min="0">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="form-label">Jarak dari Kantor</label>
                    <div class="input-group">
                        <input type="number" name="distance_km" class="form-control" value="{{ old('distance_km') }}" min="0" step="0.1" placeholder="0.0">
                        <span class="input-group-text">km</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Informasi Perangkat --}}
    <div class="col-md-6">
        <div class="card h-100">
            <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="mb-3">
                    <label class="form-label">Tipe Perangkat <span class="text-danger">*</span></label>
                    <select name="device_type_id" class="form-select @error('device_type_id') is-invalid @enderror" required>
                        <option value="">-- Pilih Tipe --</option>
                        @foreach($deviceTypes as $dt)
                        <option value="{{ $dt->id }}" {{ old('device_type_id') == $dt->id ? 'selected' : '' }}>
                            {{ $dt->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('device_type_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-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') == $brand->name ? 'selected' : '' }}>
                                {{ $brand->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-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 ?? '' }}"
                                    data-dtype="{{ $dm->device_type_id }}"
                                    {{ old('model') == $dm->name ? 'selected' : '' }}>
                                {{ $dm->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label">Serial Number</label>
                        <input type="text" name="serial_number" class="form-control" value="{{ old('serial_number') }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Warna</label>
                        <input type="text" name="color" class="form-control" value="{{ old('color') }}" placeholder="Contoh: Hitam">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Kelengkapan / Aksesori</label>
                    <input type="text" name="accessories" class="form-control" value="{{ old('accessories') }}" placeholder="Contoh: Charger, Case">
                </div>
                <div class="mb-3">
                    <label class="form-label">Kondisi Fisik Masuk <span class="text-danger">*</span></label>
                    <textarea name="condition_incoming" class="form-control @error('condition_incoming') is-invalid @enderror" rows="2" required
                              placeholder="Deskripsikan kondisi fisik perangkat...">{{ old('condition_incoming') }}</textarea>
                    @error('condition_incoming')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="form-label">Keluhan / Kerusakan <span class="text-danger">*</span></label>
                    <textarea name="complaint" class="form-control @error('complaint') is-invalid @enderror" rows="2" required
                              placeholder="Jelaskan keluhan pelanggan...">{{ old('complaint') }}</textarea>
                    @error('complaint')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    {{-- Detail Pekerjaan Servis --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-bold"><i class="bi bi-list-check me-2"></i>Detail Pekerjaan Servis</h6>
                <button type="button" class="btn btn-sm btn-outline-primary" id="addService">
                    <i class="bi bi-plus-lg me-1"></i> Tambah
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table mb-0" id="serviceTable">
                    <thead><tr>
                        <th>Kategori</th>
                        <th>Deskripsi Pekerjaan</th>
                        <th style="width:80px;">Qty</th>
                        <th style="width:150px;">Harga</th>
                        <th style="width:40px;"></th>
                    </tr></thead>
                    <tbody id="serviceBody">
                        <tr id="noServiceRow"><td colspan="5" class="text-center text-muted py-3">Belum ada item. Klik "Tambah" untuk menambahkan.</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Spare Part --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-bold"><i class="bi bi-box-seam me-2"></i>Spare Part Digunakan</h6>
                <button type="button" class="btn btn-sm btn-outline-primary" id="addPart">
                    <i class="bi bi-plus-lg me-1"></i> Tambah Part
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table mb-0" id="partTable">
                    <thead><tr>
                        <th>Spare Part</th>
                        <th style="width:80px;">Qty</th>
                        <th style="width:150px;">Harga Satuan</th>
                        <th style="width:150px;">Subtotal</th>
                        <th style="width:40px;"></th>
                    </tr></thead>
                    <tbody id="partBody">
                        <tr id="noPartRow"><td colspan="5" class="text-center text-muted py-3">Belum ada spare part.</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Catatan --}}
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <label class="form-label">Catatan Internal</label>
                <textarea name="notes" class="form-control" rows="2" placeholder="Catatan untuk internal teknisi...">{{ old('notes') }}</textarea>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-check-lg me-1"></i> Buat Order Servis</button>
            <a href="{{ route('service-orders.index') }}" class="btn btn-outline-secondary btn-lg">Batal</a>
        </div>
    </div>
</div>
</form>

<template id="serviceRowTpl">
    <tr class="service-row">
        <td>
            <select name="services[IDX][service_category_id]" class="form-select form-select-sm">
                <option value="">-- Kategori --</option>
                @foreach($categories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
        </td>
        <td><input type="text" name="services[IDX][description]" class="form-control form-control-sm" placeholder="Deskripsi pekerjaan" required></td>
        <td><input type="number" name="services[IDX][quantity]" class="form-control form-control-sm qty-svc" value="1" min="1" required></td>
        <td>
            <div class="input-group input-group-sm">
                <span class="input-group-text">Rp</span>
                <input type="number" name="services[IDX][price]" class="form-control price-svc" value="0" min="0" required>
            </div>
        </td>
        <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-x"></i></button></td>
    </tr>
</template>

<template id="partRowTpl">
    <tr class="part-row">
        <td>
            <select name="parts[IDX][spare_part_id]" class="form-select form-select-sm part-select" required>
                <option value="">-- Pilih Part --</option>
                @foreach($spareParts as $p)
                <option value="{{ $p->id }}" data-price="{{ $p->sell_price }}">{{ $p->name }} (Stok: {{ $p->stock }})</option>
                @endforeach
            </select>
        </td>
        <td><input type="number" name="parts[IDX][quantity]" class="form-control form-control-sm qty-part" value="1" min="1" required></td>
        <td>
            <div class="input-group input-group-sm">
                <span class="input-group-text">Rp</span>
                <input type="number" name="parts[IDX][unit_price]" class="form-control price-part" value="0" min="0" required>
            </div>
        </td>
        <td><span class="subtotal-part small fw-medium">Rp 0</span></td>
        <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-x"></i></button></td>
    </tr>
</template>

@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script>
// All model options (for cascading filter)
const allModelsData = {!! $deviceModels->map(fn($m) => ['value' => $m->name, 'text' => $m->name, 'brand' => $m->brand->name ?? '', 'dtype' => (string)$m->device_type_id])->values()->toJson() !!};

// Spare part price lookup: { id: sell_price }
const partsLookup = {!! $spareParts->pluck('sell_price', 'id')->toJson() !!};

// --- Initialize static selects ---
const custTs  = new TomSelect('[name="customer_id"]',   { allowEmptyOption: true });
const techTs  = new TomSelect('[name="technician_id"]', { allowEmptyOption: true });
const dtTs    = new TomSelect('[name="device_type_id"]',{ allowEmptyOption: true, onChange: filterModels });
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 dtv = dtTs.getValue();
    const prev = modelTs.getValue();

    modelTs.clearOptions();
    allModelsData
        .filter(m => (!bv || m.brand === bv) && (!dtv || m.dtype === dtv))
        .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) && (!dtv || m.dtype === dtv));
    modelTs.setValue(stillValid ? prev : '', true);
}
filterModels();

// --- Dynamic row helpers ---
function initRowTs(row) {
    row.querySelectorAll('select').forEach(sel => new TomSelect(sel, { allowEmptyOption: true }));
}

let svcIdx = 0, partIdx = 0;
function fmt(n) { return 'Rp ' + parseInt(n || 0).toLocaleString('id-ID'); }

document.getElementById('addService').addEventListener('click', function () {
    document.getElementById('noServiceRow')?.remove();
    const wrapper = document.createElement('tbody');
    wrapper.innerHTML = document.getElementById('serviceRowTpl').innerHTML.replaceAll('IDX', svcIdx++);
    const newRow = wrapper.firstElementChild;
    document.getElementById('serviceBody').appendChild(newRow);
    initRowTs(newRow);
});

document.getElementById('addPart').addEventListener('click', function () {
    document.getElementById('noPartRow')?.remove();
    const wrapper = document.createElement('tbody');
    wrapper.innerHTML = document.getElementById('partRowTpl').innerHTML.replaceAll('IDX', partIdx++);
    const newRow = wrapper.firstElementChild;

    ['qty-part', 'price-part'].forEach(cls =>
        newRow.querySelector('.' + cls)?.addEventListener('input', () => updateSubtotal(newRow))
    );

    document.getElementById('partBody').appendChild(newRow);

    new TomSelect(newRow.querySelector('.part-select'), {
        allowEmptyOption: true,
        onChange: function (value) {
            if (value && partsLookup[value] !== undefined) {
                newRow.querySelector('.price-part').value = partsLookup[value];
                updateSubtotal(newRow);
            }
        }
    });
});

function updateSubtotal(row) {
    const qty   = parseInt(row.querySelector('.qty-part')?.value || 1);
    const price = parseFloat(row.querySelector('.price-part')?.value || 0);
    row.querySelector('.subtotal-part').textContent = fmt(qty * price);
}

document.addEventListener('click', function (e) {
    if (e.target.closest('.remove-row')) e.target.closest('tr').remove();
});
</script>
@endsection