@extends('layouts.master')
@section('title', 'Edit Job '.$repairJob->job_number)

@push('styles')
<style>
    .item-row { display: flex; gap: 8px; align-items: end; margin-bottom: 8px; flex-wrap: wrap; }
    .item-row .form-control, .item-row .form-select { flex: 1; min-width: 100px; }
    .btn-item { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; color: #fff; }
    .btn-item-add { background: #066fd1; }
    .btn-item-remove { background: #dc3545; }
    .items-header { font-weight: 600; font-size: 0.875rem; color: #66789c; margin-bottom: 6px; display: flex; gap: 8px; padding: 0 4px; }
    .items-header span { flex: 1; min-width: 100px; }
    .items-header .col-btn { flex: 0 0 60px; }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Edit Job: {{ $repairJob->job_number }}</h3>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('repair-jobs.update', $repairJob) }}">
                    @csrf @method('PUT')
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Peranti</label>
                                <input type="hidden" name="device_id" value="{{ $repairJob->device_id }}">
                                <div class="form-control-plaintext fw-semibold">
                                    {{ $repairJob->device->customer->name }} - {{ $repairJob->device->brand }} {{ $repairJob->device->model }}
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Masalah</label>
                                <textarea name="issue_description" class="form-control @error('issue_description') is-invalid @enderror" rows="3" placeholder="Masalah peranti...">{{ old('issue_description', $repairJob->issue_description) }}</textarea>
                                @error('issue_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Aksesori</label>
                                <input type="text" name="accessories" class="form-control @error('accessories') is-invalid @enderror" value="{{ old('accessories', $repairJob->accessories) }}" placeholder="Aksesori disertakan">
                                @error('accessories')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Diagnosis</label>
                                <textarea name="diagnosis" class="form-control @error('diagnosis') is-invalid @enderror" rows="3" placeholder="Hasil diagnosis...">{{ old('diagnosis', $repairJob->diagnosis) }}</textarea>
                                @error('diagnosis')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Nota</label>
                                <textarea name="notes" class="form-control @error('notes') is-invalid @enderror" rows="2">{{ old('notes', $repairJob->notes) }}</textarea>
                                @error('notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Diterima Oleh <span class="text-danger">*</span></label>
                                <select name="technician_id" class="form-select @error('technician_id') is-invalid @enderror" required>
                                    <option value="">-- Pilih Teknikal --</option>
                                    @foreach($technicians as $t)
                                    <option value="{{ $t->id }}" {{ old('technician_id', $repairJob->technician_id) == $t->id ? 'selected' : '' }}>{{ $t->name }}</option>
                                    @endforeach
                                </select>
                                @error('technician_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Tarikh Selesai / Batal</label>
                                <input type="datetime-local" name="completed_date" class="form-control @error('completed_date') is-invalid @enderror" value="{{ old('completed_date', $repairJob->completed_date?->format('Y-m-d\TH:i')) }}">
                                @error('completed_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Kos Upah (RM)</label>
                                <input type="number" step="0.01" min="0" name="estimated_cost" id="kos_upah" class="form-control @error('estimated_cost') is-invalid @enderror" value="{{ old('estimated_cost', $repairJob->estimated_cost) }}" oninput="hitungJumlah()">
                                @error('estimated_cost')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Alat Ganti / Sparepart</label>
                                <div class="items-header">
                                    <span>Perkara</span>
                                    <span>No. Siri</span>
                                    <span>Jaminan</span>
                                    <span>Kos (RM)</span>
                                    <span class="col-btn"></span>
                                </div>
                                <div id="itemsContainer">
                                    @forelse($repairJob->items as $item)
                                    <div class="item-row">
                                        <input type="text" class="form-control" placeholder="Perkara" name="item_name[]" value="{{ $item->item_name }}">
                                        <input type="text" class="form-control" placeholder="No. Siri" name="item_serial[]" value="{{ $item->serial_number }}">
                                        <select class="form-select" name="item_warranty[]">
                                            <option value="">Pilih</option>
                                            <option value="1_minggu" {{ $item->warranty == '1_minggu' ? 'selected' : '' }}>1 Minggu</option>
                                            <option value="1_bulan" {{ $item->warranty == '1_bulan' ? 'selected' : '' }}>1 Bulan</option>
                                            <option value="3_bulan" {{ $item->warranty == '3_bulan' ? 'selected' : '' }}>3 Bulan</option>
                                            <option value="6_bulan" {{ $item->warranty == '6_bulan' ? 'selected' : '' }}>6 Bulan</option>
                                            <option value="1_tahun" {{ $item->warranty == '1_tahun' ? 'selected' : '' }}>1 Tahun</option>
                                            <option value="3_tahun" {{ $item->warranty == '3_tahun' ? 'selected' : '' }}>3 Tahun</option>
                                            <option value="5_tahun" {{ $item->warranty == '5_tahun' ? 'selected' : '' }}>5 Tahun</option>
                                        </select>
                                        <input type="number" class="form-control" placeholder="0.00" step="0.01" min="0" name="item_price[]" value="{{ $item->price }}" oninput="hitungJumlah()">
                                        <button type="button" class="btn-item btn-item-remove" onclick="removeItem(this)">✕</button>
                                    </div>
                                    @empty
                                    <div class="item-row">
                                        <input type="text" class="form-control" placeholder="Perkara" name="item_name[]">
                                        <input type="text" class="form-control" placeholder="No. Siri" name="item_serial[]">
                                        <select class="form-select" name="item_warranty[]">
                                            <option value="">Pilih</option>
                                            <option value="1_minggu">1 Minggu</option>
                                            <option value="1_bulan">1 Bulan</option>
                                            <option value="3_bulan">3 Bulan</option>
                                            <option value="6_bulan">6 Bulan</option>
                                            <option value="1_tahun">1 Tahun</option>
                                            <option value="3_tahun">3 Tahun</option>
                                            <option value="5_tahun">5 Tahun</option>
                                        </select>
                                        <input type="number" class="form-control" placeholder="0.00" step="0.01" min="0" name="item_price[]" oninput="hitungJumlah()">
                                        <button type="button" class="btn-item btn-item-add" onclick="addItem(this)">+</button>
                                    </div>
                                    @endforelse
                                </div>
                                <div class="mt-2">
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="addItem(document.querySelector('#itemsContainer .item-row:last-child'))">
                                        <i class="ti ti-plus me-1"></i>Tambah Item
                                    </button>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Jumlah Kos Alat Ganti (RM)</label>
                                <input type="number" step="0.01" min="0" name="kos_alat_ganti" id="kos_alat_ganti" class="form-control" value="{{ old('kos_alat_ganti', $repairJob->kos_alat_ganti) }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Diskaun (RM)</label>
                                <input type="number" step="0.01" min="0" name="diskaun" id="diskaun" class="form-control @error('diskaun') is-invalid @enderror" value="{{ old('diskaun', $repairJob->diskaun) }}" oninput="hitungJumlah()">
                                @error('diskaun')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Jumlah Kos Selepas Diskaun (RM)</label>
                                <input type="number" step="0.01" min="0" name="total_cost" id="jumlah_kos" class="form-control form-control-lg fw-bold" value="{{ old('total_cost', $repairJob->total_cost) }}" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="ti ti-device-floppy me-1"></i>Kemaskini
                        </button>
                        <a href="{{ route('repair-jobs.index') }}" class="btn btn-outline-secondary ms-2">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function addItem(btn) {
    const container = document.getElementById('itemsContainer');
    const row = document.createElement('div');
    row.className = 'item-row';
    row.innerHTML = `
        <input type="text" class="form-control" placeholder="Perkara" name="item_name[]">
        <input type="text" class="form-control" placeholder="No. Siri" name="item_serial[]">
        <select class="form-select" name="item_warranty[]">
            <option value="">Pilih</option>
            <option value="1_minggu">1 Minggu</option>
            <option value="1_bulan">1 Bulan</option>
            <option value="3_bulan">3 Bulan</option>
            <option value="6_bulan">6 Bulan</option>
            <option value="1_tahun">1 Tahun</option>
            <option value="3_tahun">3 Tahun</option>
            <option value="5_tahun">5 Tahun</option>
        </select>
        <input type="number" class="form-control" placeholder="0.00" step="0.01" min="0" name="item_price[]" oninput="hitungJumlah()">
        <button type="button" class="btn-item btn-item-remove" onclick="removeItem(this)">✕</button>
    `;
    container.appendChild(row);
    hitungJumlah();
}

function removeItem(btn) {
    const container = document.getElementById('itemsContainer');
    if (container.children.length > 1) {
        btn.closest('.item-row').remove();
        hitungJumlah();
    }
}

function hitungJumlah() {
    const prices = document.querySelectorAll('input[name="item_price[]"]');
    let totalAlat = 0;
    prices.forEach(p => { totalAlat += parseFloat(p.value) || 0; });
    document.getElementById('kos_alat_ganti').value = totalAlat.toFixed(2);

    const upah = parseFloat(document.getElementById('kos_upah').value) || 0;
    const diskaun = parseFloat(document.getElementById('diskaun').value) || 0;
    document.getElementById('jumlah_kos').value = (upah + totalAlat - diskaun).toFixed(2);
}
</script>
@endpush