@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>New Order</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('orders.index') }}">Orders</a></li>
                <li class="breadcrumb-item active">New Order</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
        <div class="row">
            <div class="col-xl-12">
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (session()->has('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-octagon me-1"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="card">
                    <div class="card-body pt-3">
                        <form action="{{ route('orders.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="row">
                                <!-- Order Type & Priority -->
                                <div class="col-md-6">
                                    <h5 class="mb-3"><i class="bi bi-ticket-perforated"></i> Jenis Order</h5>
                                    
                                    <div class="form-group mb-3">
                                        <label for="type" class="form-label">Jenis Tiket <span class="text-danger">*</span></label>
                                        <select name="type" id="type" class="form-control" required>
                                            <option value="" disabled selected>Pilih Jenis Tiket</option>
                                            <option value="psb" {{ old('type') == 'psb' ? 'selected' : '' }}>
                                                PSB (Pemasangan Sambungan Baru)
                                            </option>
                                            <option value="umum" {{ old('type') == 'umum' ? 'selected' : '' }}>
                                                Tiket Umum (Service/Perbaikan)
                                            </option>
                                        </select>
                                        <small class="text-muted">
                                            <strong>PSB:</strong> Instalasi baru<br>
                                            <strong>Umum:</strong> Maintenance, troubleshooting, perbaikan
                                        </small>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="sub_category" class="form-label">Kategori <span class="text-danger">*</span></label>
                                        <select name="sub_category" id="sub_category" class="form-control" required>
                                            <option value="">Pilih kategori...</option>
                                            <!-- Options will be populated by JavaScript based on type -->
                                        </select>
                                        <small class="text-muted" id="sub_category_hint">Pilih jenis tiket terlebih dahulu</small>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="priority" class="form-label">Prioritas <span class="text-danger">*</span></label>
                                        <select name="priority" id="priority" class="form-control" required>
                                            <option value="medium" {{ old('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                            <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                            <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                            <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                        </select>
                                    </div>

                                    <!-- <div class="form-group mb-3">
                                        <label for="scheduled_date" class="form-label">Jadwal Pelaksanaan</label>
                                        <input type="datetime-local" name="scheduled_date" id="scheduled_date" 
                                               class="form-control" value="{{ old('scheduled_date') }}" 
                                               min="{{ now()->format('Y-m-d\TH:i') }}">
                                        <small class="text-muted">Opsional - Jika ada jadwal khusus dari klien</small>
                                    </div> -->
                                </div>

                                <!-- Customer Information -->
                                <div class="col-md-6">
                                    <h5 class="mb-3"><i class="bi bi-person-circle"></i> Data Customer</h5>
                                    
                                    <!-- Customer Selection (Only Existing Customer) -->
                                    <div id="existing-customer-section" class="customer-section">
                                        <div class="form-group mb-3">
                                            <label for="customer_search" class="form-label">Cari Customer <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="text" id="customer_search" class="form-control" 
                                                       placeholder="Ketik nama customer untuk mencari..." autocomplete="off">
                                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                            </div>
                                            <select name="customer_id" id="customer_id" class="form-control mt-2" required style="display: none;">
                                                <option value="">Pilih customer...</option>
                                                @foreach($customers as $customer)
                                                    <option value="{{ $customer->id }}" 
                                                            data-name="{{ $customer->name }}"
                                                            data-phone="{{ $customer->phone ?: $customer->username }}"
                                                            data-email="{{ $customer->email }}"
                                                            data-address="{{ $customer->address }}"
                                                            data-lat="{{ $customer->lat }}"
                                                            data-lng="{{ $customer->lon }}"
                                                            {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                                        {{ $customer->name }} - {{ $customer->phone ?: $customer->username }} - {{ $customer->email }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            
                                            <!-- Search Results Dropdown -->
                                            <div id="customer_search_results" class="list-group mt-1" style="display: none; position: absolute; z-index: 1000; width: 100%; max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                                            </div>
                                            
                                            @if($customers->count() == 0)
                                                <small class="text-warning">
                                                    <i class="bi bi-exclamation-triangle"></i>
                                                    Belum ada customer terdaftar. 
                                                    <a href="{{ route('data-customer.create') }}" target="_blank">Tambah Customer</a>
                                                </small>
                                            @else
                                                <small class="text-muted">
                                                    <i class="bi bi-info-circle"></i> 
                                                    Ketik nama customer untuk mencari dan memilih
                                                </small>
                                            @endif
                                        </div>

                                        <div id="customer-info" class="border rounded p-3 bg-light d-none">
                                            <h6><i class="bi bi-info-circle"></i> Info Customer:</h6>
                                            <table class="table table-sm table-borderless mb-0">
                                                <tr>
                                                    <td width="100"><strong>Nama:</strong></td>
                                                    <td id="info-name">-</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Phone:</strong></td>
                                                    <td id="info-phone">-</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Email:</strong></td>
                                                    <td id="info-email">-</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Alamat:</strong></td>
                                                    <td id="info-address">-</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>GPS:</strong></td>
                                                    <td id="info-gps">-</td>
                                                </tr>
                                            </table>
                                        </div>

                                        <!-- Mitra Selection (Optional) -->
                                        <div class="form-group mb-3 mt-3">
                                            <label for="mitra_search" class="form-label">Pilih Mitra (Opsional)</label>
                                            <div class="input-group">
                                                <input type="text" id="mitra_search" class="form-control" 
                                                       placeholder="Ketik nama mitra untuk mencari..." autocomplete="off">
                                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                            </div>
                                            <select name="mitra_id" id="mitra_id" class="form-control mt-2" style="display: none;">
                                                <option value="0">Tidak ada mitra</option>
                                                @foreach($mitras ?? [] as $mitra)
                                                    <option value="{{ $mitra->id }}" 
                                                            data-name="{{ $mitra->nama }}"
                                                            data-phone="{{ $mitra->no_telp }}"
                                                            data-address="{{ $mitra->alamat }}"
                                                            {{ old('mitra_id') == $mitra->id ? 'selected' : '' }}>
                                                        {{ $mitra->nama }}{{ $mitra->no_telp ? ' - ' . $mitra->no_telp : '' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            
                                            <!-- Search Results Dropdown for Mitra -->
                                            <div id="mitra_search_results" class="list-group mt-1" style="display: none; position: absolute; z-index: 999; width: 100%; max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                                            </div>
                                            
                                            <small class="text-muted">
                                                <i class="bi bi-info-circle"></i> 
                                                Pilih mitra yang terkait dengan order ini (jika ada)
                                            </small>
                                        </div>

                                        <div id="mitra-info" class="border rounded p-3 bg-light d-none">
                                            <h6><i class="bi bi-info-circle"></i> Info Mitra:</h6>
                                            <table class="table table-sm table-borderless mb-0">
                                                <tr>
                                                    <td width="100"><strong>Nama:</strong></td>
                                                    <td id="mitra-info-name">-</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Phone:</strong></td>
                                                    <td id="mitra-info-phone">-</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Alamat:</strong></td>
                                                    <td id="mitra-info-address">-</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4">

                            

                            <hr class="my-4">

                            <!-- Order Details -->
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="mb-3"><i class="bi bi-clipboard-data"></i> Detail Pekerjaan</h5>
                                    
                                    <div class="form-group mb-3">
                                        <label for="title" class="form-label">Judul Pekerjaan <span class="text-danger">*</span></label>
                                        <input type="text" name="title" id="title" class="form-control" 
                                               value="{{ old('title') }}" placeholder="Ringkasan singkat pekerjaan" required>
                                        <small class="text-muted">Contoh: "Instalasi WiFi baru", "Perbaikan koneksi lambat", dll</small>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="description" class="form-label">Deskripsi Detail <span class="text-danger">*</span></label>
                                        <textarea name="description" id="description" class="form-control" 
                                                  rows="4" placeholder="Jelaskan detail masalah, kebutuhan, atau keluhan klien" required>{{ old('description') }}</textarea>
                                    </div>

                                    <!-- Info Photos for Worker -->
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <label class="form-label"><i class="bi bi-card-image"></i> Foto Informasi untuk Teknisi (Opsional)</label>
                                            <small class="text-muted d-block mb-2">Upload foto sebagai panduan/referensi untuk teknisi saat mengerjakan tugas</small>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="card border">
                                                <div class="card-body">
                                                    <label for="label_info_foto1" class="form-label">Label Foto 1</label>
                                                    <input type="text" name="label_info_foto1" id="label_info_foto1" 
                                                           class="form-control mb-2" placeholder="Contoh: Denah lokasi, Foto modem lama, dll"
                                                           value="{{ old('label_info_foto1') }}">
                                                    
                                                    <label for="info_foto1" class="form-label">Upload Foto 1</label>
                                                    <input type="file" name="info_foto1" id="info_foto1" 
                                                           class="form-control" accept="image/jpeg,image/jpg,image/png">
                                                    <small class="text-muted">Format: JPG, PNG. Maks 5MB</small>
                                                    
                                                    <div id="preview_info_foto1" class="mt-2" style="display: none;">
                                                        <img src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="card border">
                                                <div class="card-body">
                                                    <label for="label_info_foto2" class="form-label">Label Foto 2</label>
                                                    <input type="text" name="label_info_foto2" id="label_info_foto2" 
                                                           class="form-control mb-2" placeholder="Contoh: Skema jaringan, Kondisi existing, dll"
                                                           value="{{ old('label_info_foto2') }}">
                                                    
                                                    <label for="info_foto2" class="form-label">Upload Foto 2</label>
                                                    <input type="file" name="info_foto2" id="info_foto2" 
                                                           class="form-control" accept="image/jpeg,image/jpg,image/png">
                                                    <small class="text-muted">Format: JPG, PNG. Maks 5MB</small>
                                                    
                                                    <div id="preview_info_foto2" class="mt-2" style="display: none;">
                                                        <img src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Info Files (PDF) for Worker -->
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <label class="form-label"><i class="bi bi-file-earmark-pdf"></i> Dokumen PDF untuk Teknisi (Opsional)</label>
                                            <small class="text-muted d-block mb-2">Upload dokumen seperti surat jalan, SOP, atau dokumen pendukung lainnya</small>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="card border">
                                                <div class="card-body">
                                                    <label for="label_info_file1" class="form-label">Label Dokumen 1</label>
                                                    <input type="text" name="label_info_file1" id="label_info_file1" 
                                                           class="form-control mb-2" placeholder="Contoh: Surat Jalan, SOP Instalasi, dll"
                                                           value="{{ old('label_info_file1') }}">
                                                    
                                                    <label for="info_file1" class="form-label">Upload PDF 1</label>
                                                    <input type="file" name="info_file1" id="info_file1" 
                                                           class="form-control" accept="application/pdf">
                                                    <small class="text-muted">Format: PDF. Maks 10MB</small>
                                                    
                                                    <div id="file_info_1" class="mt-2 text-success" style="display: none;">
                                                        <i class="bi bi-file-earmark-pdf"></i> <span id="filename_info_1"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="card border">
                                                <div class="card-body">
                                                    <label for="label_info_file2" class="form-label">Label Dokumen 2</label>
                                                    <input type="text" name="label_info_file2" id="label_info_file2" 
                                                           class="form-control mb-2" placeholder="Contoh: Checklist, Lembar Kerja, dll"
                                                           value="{{ old('label_info_file2') }}">
                                                    
                                                    <label for="info_file2" class="form-label">Upload PDF 2</label>
                                                    <input type="file" name="info_file2" id="info_file2" 
                                                           class="form-control" accept="application/pdf">
                                                    <small class="text-muted">Format: PDF. Maks 10MB</small>
                                                    
                                                    <div id="file_info_2" class="mt-2 text-success" style="display: none;">
                                                        <i class="bi bi-file-earmark-pdf"></i> <span id="filename_info_2"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group mb-4">
                                        <label for="admin_notes" class="form-label">Catatan Admin</label>
                                        <textarea name="admin_notes" id="admin_notes" class="form-control" 
                                                  rows="3" placeholder="Catatan internal untuk teknisi (opsional)">{{ old('admin_notes') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <hr>
                            <div class="d-flex justify-content-between align-items-center">
                                <a href="{{ route('orders.index') }}" class="btn btn-secondary">
                                    <i class="bi bi-arrow-left"></i> Kembali
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-plus-circle"></i> Buat Order
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sub-category dropdown handler
    const typeSelect = document.getElementById('type');
    const subCategorySelect = document.getElementById('sub_category');
    const subCategoryHint = document.getElementById('sub_category_hint');
    
    const subCategoryOptions = {
        psb: [
            { value: 'psb', label: 'PSB (Pemasangan Sambungan Baru)', icon: 'bi-plug' }
        ],
        umum: [
            { value: 'gangguan', label: 'Gangguan', icon: 'bi-exclamation-triangle' },
            { value: 'dismantle', label: 'Dismantle (Bongkar)', icon: 'bi-scissors' },
            { value: 'relokasi', label: 'Relokasi (Pindah Lokasi)', icon: 'bi-arrows-move' },
            { value: 'custom', label: 'Custom', icon: 'bi-arrows-move' }
        ]
    };

    function updateSubCategory() {
        const selectedType = typeSelect.value;
        subCategorySelect.innerHTML = '<option value="">Pilih kategori...</option>';
        
        if (selectedType && subCategoryOptions[selectedType]) {
            const options = subCategoryOptions[selectedType];
            options.forEach(opt => {
                const option = document.createElement('option');
                option.value = opt.value;
                option.textContent = opt.label;
                subCategorySelect.appendChild(option);
            });
            
            // Auto-select default value
            if (selectedType === 'psb') {
                subCategorySelect.value = 'psb';
                subCategoryHint.innerHTML = '<i class="bi bi-info-circle"></i> PSB selalu untuk Pemasangan Sambungan Baru';
            } else {
                subCategorySelect.value = 'gangguan'; // Default for umum
                subCategoryHint.innerHTML = '<i class="bi bi-info-circle"></i> Pilih kategori: Gangguan, Dismantle, Relokasi, atau Custom';
            }
            
            subCategorySelect.disabled = false;
        } else {
            subCategorySelect.disabled = true;
            subCategoryHint.textContent = 'Pilih jenis tiket terlebih dahulu';
        }
    }

    typeSelect.addEventListener('change', updateSubCategory);
    
    // Initialize if there's an old value
    @if(old('type'))
        updateSubCategory();
        subCategorySelect.value = '{{ old("sub_category") }}';
    @endif

    // Customer search functionality
    const customerSearch = document.getElementById('customer_search');
    const customerSelect = document.getElementById('customer_id');
    const customerSearchResults = document.getElementById('customer_search_results');
    const customerInfo = document.getElementById('customer-info');
    
    // All customers data
    const customersData = [];
    Array.from(customerSelect.options).forEach(option => {
        if (option.value) {
            customersData.push({
                id: option.value,
                name: option.dataset.name,
                phone: option.dataset.phone,
                email: option.dataset.email,
                address: option.dataset.address,
                lat: option.dataset.lat,
                lng: option.dataset.lng,
                text: option.textContent
            });
        }
    });

    // Customer search input handler
    customerSearch.addEventListener('input', function() {
        const query = this.value.toLowerCase();
        
        if (query.length < 1) {
            customerSearchResults.style.display = 'none';
            return;
        }
        
        // Filter customers based on search query
        const filtered = customersData.filter(customer => 
            customer.name.toLowerCase().includes(query) ||
            customer.phone.toLowerCase().includes(query) ||
            customer.email.toLowerCase().includes(query)
        );
        
        // Display search results
        if (filtered.length > 0) {
            customerSearchResults.innerHTML = '';
            filtered.forEach(customer => {
                const item = document.createElement('a');
                item.className = 'list-group-item list-group-item-action';
                item.href = '#';
                item.innerHTML = `
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1">${customer.name}</h6>
                        <small>${customer.phone}</small>
                    </div>
                    <p class="mb-1">${customer.email}</p>
                    <small>${customer.address || 'Alamat tidak ada'}</small>
                `;
                
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    selectCustomer(customer);
                });
                
                customerSearchResults.appendChild(item);
            });
            customerSearchResults.style.display = 'block';
        } else {
            customerSearchResults.innerHTML = '<div class="list-group-item">Tidak ada customer ditemukan</div>';
            customerSearchResults.style.display = 'block';
        }
    });

    // Function to select customer
    function selectCustomer(customer) {
        customerSearch.value = customer.name;
        customerSelect.value = customer.id;
        customerSearchResults.style.display = 'none';
        
        // Trigger customer info display
        showCustomerInfo(customer);
    }
    
    // Function to show customer info
    function showCustomerInfo(customer) {
        customerInfo.classList.remove('d-none');
        document.getElementById('info-name').textContent = customer.name || '-';
        document.getElementById('info-phone').textContent = customer.phone || '-';
        document.getElementById('info-email').textContent = customer.email || '-';
        document.getElementById('info-address').textContent = customer.address || '-';
        
        // Show GPS coordinates if available
        const gpsText = (customer.lat && customer.lng) ? `${customer.lat}, ${customer.lng}` : 'Belum ada koordinat GPS';
        document.getElementById('info-gps').textContent = gpsText;
    }

    // Hide search results when clicking outside
    document.addEventListener('click', function(e) {
        if (!customerSearch.contains(e.target) && !customerSearchResults.contains(e.target)) {
            customerSearchResults.style.display = 'none';
        }
        if (mitraSearch && !mitraSearch.contains(e.target) && !mitraSearchResults.contains(e.target)) {
            mitraSearchResults.style.display = 'none';
        }
    });

    // Mitra search functionality
    const mitraSearch = document.getElementById('mitra_search');
    const mitraSelect = document.getElementById('mitra_id');
    const mitraSearchResults = document.getElementById('mitra_search_results');
    const mitraInfo = document.getElementById('mitra-info');
    
    if (mitraSearch && mitraSelect) {
        // All mitras data
        const mitrasData = [];
        Array.from(mitraSelect.options).forEach(option => {
            if (option.value && option.value != '0') {
                mitrasData.push({
                    id: option.value,
                    name: option.dataset.name,
                    phone: option.dataset.phone || '',
                    address: option.dataset.address || '',
                    text: option.textContent
                });
            }
        });

        // Mitra search input handler
        mitraSearch.addEventListener('input', function() {
            const query = this.value.toLowerCase();
            
            if (query.length < 1) {
                mitraSearchResults.style.display = 'none';
                return;
            }
            
            // Filter mitras based on search query
            const filtered = mitrasData.filter(mitra => 
                mitra.name.toLowerCase().includes(query) ||
                mitra.phone.toLowerCase().includes(query) ||
                (mitra.address && mitra.address.toLowerCase().includes(query))
            );
            
            // Display search results
            if (filtered.length > 0) {
                mitraSearchResults.innerHTML = '';
                filtered.forEach(mitra => {
                    const item = document.createElement('a');
                    item.className = 'list-group-item list-group-item-action';
                    item.href = '#';
                    item.innerHTML = `
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">${mitra.name}</h6>
                            ${mitra.phone ? `<small>${mitra.phone}</small>` : ''}
                        </div>
                        ${mitra.address ? `<small>${mitra.address}</small>` : ''}
                    `;
                    
                    item.addEventListener('click', function(e) {
                        e.preventDefault();
                        selectMitra(mitra);
                    });
                    
                    mitraSearchResults.appendChild(item);
                });
                mitraSearchResults.style.display = 'block';
            } else {
                mitraSearchResults.innerHTML = '<div class="list-group-item">Tidak ada mitra ditemukan</div>';
                mitraSearchResults.style.display = 'block';
            }
        });

        // Function to select mitra
        function selectMitra(mitra) {
            mitraSearch.value = mitra.name;
            mitraSelect.value = mitra.id;
            mitraSearchResults.style.display = 'none';
            
            // Trigger mitra info display
            showMitraInfo(mitra);
        }
        
        // Function to show mitra info
        function showMitraInfo(mitra) {
            mitraInfo.classList.remove('d-none');
            document.getElementById('mitra-info-name').textContent = mitra.name || '-';
            document.getElementById('mitra-info-phone').textContent = mitra.phone || '-';
            document.getElementById('mitra-info-address').textContent = mitra.address || '-';
        }
        
        // Clear button functionality
        mitraSearch.addEventListener('keyup', function(e) {
            if (e.key === 'Escape') {
                this.value = '';
                mitraSelect.value = '0';
                mitraSearchResults.style.display = 'none';
                mitraInfo.classList.add('d-none');
            }
        });
    }

    // Priority color indicator
    const prioritySelect = document.getElementById('priority');
    if (prioritySelect) {
        prioritySelect.addEventListener('change', function() {
            const value = this.value;
            const colors = {
                'low': '#28a745',
                'medium': '#ffc107', 
                'high': '#fd7e14',
                'urgent': '#dc3545'
            };
            
            this.style.borderLeft = `4px solid ${colors[value] || '#6c757d'}`;
        });

        // Initialize priority color
        prioritySelect.dispatchEvent(new Event('change'));
    }

    // Photo preview handlers
    function setupPhotoPreview(inputId, previewId) {
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);
        
        if (input && preview) {
            input.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    if (file.size > 5 * 1024 * 1024) { // 5MB limit
                        alert('Ukuran file terlalu besar. Maksimal 5MB');
                        this.value = '';
                        preview.style.display = 'none';
                        return;
                    }
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.querySelector('img').src = e.target.result;
                        preview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.style.display = 'none';
                }
            });
        }
    }
    
    setupPhotoPreview('info_foto1', 'preview_info_foto1');
    setupPhotoPreview('info_foto2', 'preview_info_foto2');

    // PDF file info handlers
    function setupFileInfo(inputId, infoId, filenameId) {
        const input = document.getElementById(inputId);
        const info = document.getElementById(infoId);
        const filename = document.getElementById(filenameId);
        
        if (input && info && filename) {
            input.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    if (file.size > 10 * 1024 * 1024) { // 10MB limit
                        alert('Ukuran file terlalu besar. Maksimal 10MB');
                        this.value = '';
                        info.style.display = 'none';
                        return;
                    }
                    
                    filename.textContent = file.name;
                    info.style.display = 'block';
                } else {
                    info.style.display = 'none';
                }
            });
        }
    }
    
    setupFileInfo('info_file1', 'file_info_1', 'filename_info_1');
    setupFileInfo('info_file2', 'file_info_2', 'filename_info_2');
});

// Form submission handler
document.querySelector('form').addEventListener('submit', function(e) {
    const customerId = document.querySelector('[name="customer_id"]').value;
    
    console.log('Form submission - Customer ID:', customerId);
    
    // Debug: log all form data
    const formData = new FormData(this);
    console.log('All form data:');
    for (let [key, value] of formData.entries()) {
        console.log(key + ':', value);
    }
    
    // Ensure customer_id is selected
    if (!customerId) {
        e.preventDefault();
        alert('Pilih customer terlebih dahulu');
        return false;
    }
});
</script>
@endpush