@extends('layouts.master')
@section('title', 'Kerja Baharu')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Job Repair Baru</h3>
            </div>
            <div class="card-body">
                <form id="createJobForm" method="POST" action="{{ route('repair-jobs.store') }}">
                    @csrf

                    <h4 class="mb-3">
                        <i class="ti ti-user me-1 text-primary"></i>Maklumat Pelanggan
                    </h4>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Nama <span class="text-danger">*</span></label>
                                <input type="text" name="customer_name" class="form-control @error('customer_name') is-invalid @enderror" value="{{ old('customer_name') }}" required>
                                @error('customer_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">No Telefon <span class="text-danger">*</span></label>
                                <input type="text" name="customer_phone" class="form-control @error('customer_phone') is-invalid @enderror" value="{{ old('customer_phone') }}" required>
                                @error('customer_phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>

                    <hr>
                    <h4 class="mb-3">
                        <i class="ti ti-device-laptop me-1 text-primary"></i>Maklumat Peranti
                    </h4>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Jenis Peranti <span class="text-danger">*</span></label>
                                <select name="type" class="form-select @error('type') is-invalid @enderror" required>
                                    <option value="">-- Pilih --</option>
                                    <option value="Laptop" {{ old('type') == 'Laptop' ? 'selected' : '' }}>Laptop</option>
                                    <option value="Printer" {{ old('type') == 'Printer' ? 'selected' : '' }}>Printer</option>
                                    <option value="Desktop PC" {{ old('type') == 'Desktop PC' ? 'selected' : '' }}>Desktop PC</option>
                                    <option value="Tablet" {{ old('type') == 'Tablet' ? 'selected' : '' }}>Tablet</option>
                                    <option value="Smartphone" {{ old('type') == 'Smartphone' ? 'selected' : '' }}>Smartphone</option>
                                    <option value="Monitor" {{ old('type') == 'Monitor' ? 'selected' : '' }}>Monitor</option>
                                    <option value="Lain-Lain" {{ old('type') == 'Lain-Lain' ? 'selected' : '' }}>Lain-Lain</option>
                                </select>
                                @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Jenama <span class="text-danger">*</span></label>
                                <select name="brand_id" class="form-select @error('brand_id') is-invalid @enderror">
                                    <option value="">-- Pilih Jenama --</option>
                                    @foreach($brands as $brand)
                                    <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                                    @endforeach
                                    <option value="__other__" {{ old('brand_id') == '__other__' ? 'selected' : '' }}>Lain-lain</option>
                                </select>
                                @error('brand_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-3" id="brandManual" style="display:none">
                                <label class="form-label">Jenama (Lain-lain)</label>
                                <input type="text" name="brand" class="form-control" value="{{ old('brand') }}" placeholder="Taip jenama...">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Model</label>
                                <input type="text" name="model" class="form-control @error('model') is-invalid @enderror" value="{{ old('model') }}" placeholder="Cth: Latitude 7490">
                                @error('model')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">No Siri (Serial Number)</label>
                                <input type="text" name="serial_number" class="form-control @error('serial_number') is-invalid @enderror" value="{{ old('serial_number') }}">
                                @error('serial_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Aksesori Disertakan</label>
                                <div class="row">
                                    <div class="col-md-4 col-6 mb-1">
                                        <label class="form-check">
                                            <input type="checkbox" name="accessories_items[]" value="Tiada Aksesori" class="form-check-input" id="tiadaAksesori"
                                                {{ in_array('Tiada Aksesori', old('accessories_items', [])) ? 'checked' : '' }}>
                                            <span class="form-check-label fw-semibold">Tiada Aksesori</span>
                                        </label>
                                    </div>
                                    @php $accList = ['Adapter/Charger', 'USB Cable', 'Power Cable', 'Mouse', 'Keyboard', 'Bag/Case']; @endphp
                                    @foreach($accList as $acc)
                                    <div class="col-md-4 col-6 mb-1">
                                        <label class="form-check">
                                            <input type="checkbox" name="accessories_items[]" value="{{ $acc }}" class="form-check-input"
                                                {{ in_array($acc, old('accessories_items', [])) ? 'checked' : '' }}>
                                            <span class="form-check-label">{{ $acc }}</span>
                                        </label>
                                    </div>
                                    @endforeach
                                    <div class="col-md-4 col-6 mb-1">
                                        <label class="form-check">
                                            <input type="checkbox" class="form-check-input" id="otherAccCheck">
                                            <span class="form-check-label">Lain-lain</span>
                                        </label>
                                    </div>
                                </div>
                                <input type="hidden" name="accessories" id="accessoriesHidden" value="{{ old('accessories') }}">
                                <div class="mt-2" id="otherAccInput" style="display:none">
                                    <input type="text" class="form-control" id="otherAccText" placeholder="Taip aksesori lain...">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Masalah / Aduan</label>
                        <textarea name="issue_description" class="form-control @error('issue_description') is-invalid @enderror" rows="3" placeholder="Terangkan masalah peranti...">{{ old('issue_description') }}</textarea>
                        @error('issue_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <hr>
                    <h4 class="mb-3">
                        <i class="ti ti-clipboard-list me-1 text-primary"></i>Maklumat Kerja
                    </h4>
                    <div class="row">
                        <div class="col-md-4">
                            <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') == $t->id ? 'selected' : '' }}>{{ $t->name }}</option>
                                    @endforeach
                                </select>
                                @error('technician_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label class="form-label">Nota Tambahan</label>
                                <textarea name="notes" class="form-control @error('notes') is-invalid @enderror" rows="1">{{ old('notes') }}</textarea>
                                @error('notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="ti ti-plus me-1"></i>Buat Job
                        </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>
document.querySelector('select[name="brand_id"]').addEventListener('change', function() {
    document.getElementById('brandManual').style.display = this.value === '__other__' ? 'block' : 'none';
});

document.getElementById('otherAccCheck').addEventListener('change', function() {
    document.getElementById('otherAccInput').style.display = this.checked ? 'block' : 'none';
});

document.getElementById('tiadaAksesori').addEventListener('change', function() {
    if (this.checked) {
        document.querySelectorAll('input[name="accessories_items[]"]:not(#tiadaAksesori)').forEach(c => c.checked = false);
        document.getElementById('otherAccCheck').checked = false;
        document.getElementById('otherAccInput').style.display = 'none';
    }
});

document.querySelectorAll('input[name="accessories_items[]"]:not(#tiadaAksesori)').forEach(c => {
    c.addEventListener('change', function() {
        if (this.checked) document.getElementById('tiadaAksesori').checked = false;
    });
});

document.getElementById('createJobForm').addEventListener('submit', function() {
    const checked = document.querySelectorAll('input[name="accessories_items[]"]:checked');
    let acc = Array.from(checked).map(c => c.value);
    if (document.getElementById('tiadaAksesori').checked) {
        acc = ['Tiada Aksesori'];
    } else {
        const otherVal = document.getElementById('otherAccText').value.trim();
        if (document.getElementById('otherAccCheck').checked && otherVal) {
            acc.push(otherVal);
        }
    }
    document.getElementById('accessoriesHidden').value = acc.join(', ');
});
</script>
@endpush