@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Edit 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"><a href="{{ route('orders.show', $order->id) }}">{{ $order->order_number }}</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        @if (session()->has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-1"></i>
                {{ session('success') }}
                <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="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Edit Order: {{ $order->order_number }}</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('orders.update', $order->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <!-- Order Type Selection -->
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">Jenis Order <span class="text-danger">*</span></label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="type" 
                                                       id="type_psb" value="psb" 
                                                       {{ old('type', $order->type) == 'psb' ? 'checked' : '' }} required>
                                                <label class="form-check-label" for="type_psb">
                                                    <strong>PSB (Pemasangan Sambungan Baru)</strong>
                                                    <br><small class="text-muted">Instalasi baru untuk pelanggan</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="type" 
                                                       id="type_umum" value="umum" 
                                                       {{ old('type', $order->type) == 'umum' ? 'checked' : '' }} required>
                                                <label class="form-check-label" for="type_umum">
                                                    <strong>Tiket Umum</strong>
                                                    <br><small class="text-muted">Service, perbaikan, maintenance</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    @error('type')
                                        <div class="text-danger"><small>{{ $message }}</small></div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Sub Category -->
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="sub_category" class="form-label">Kategori <span class="text-danger">*</span></label>
                                    <select name="sub_category" id="sub_category" class="form-control @error('sub_category') is-invalid @enderror" 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 order terlebih dahulu</small>
                                    @error('sub_category')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <hr>

                            <!-- Client Information -->
                            <h6 class="mb-3">Informasi Klien</h6>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="client_name" class="form-label">Nama Klien <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('client_name') is-invalid @enderror" 
                                           id="client_name" name="client_name" 
                                           value="{{ old('client_name', $order->client_name) }}" required>
                                    @error('client_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="client_phone" class="form-label">Nomor Telepon <span class="text-danger">*</span></label>
                                    <input type="tel" class="form-control @error('client_phone') is-invalid @enderror" 
                                           id="client_phone" name="client_phone" 
                                           value="{{ old('client_phone', $order->client_phone) }}" required>
                                    @error('client_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="client_email" class="form-label">Email (Opsional)</label>
                                    <input type="email" class="form-control @error('client_email') is-invalid @enderror" 
                                           id="client_email" name="client_email" 
                                           value="{{ old('client_email', $order->client_email) }}">
                                    @error('client_email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="priority" class="form-label">Prioritas <span class="text-danger">*</span></label>
                                    <select class="form-control @error('priority') is-invalid @enderror" 
                                            id="priority" name="priority" required>
                                        <option value="">Pilih Prioritas...</option>
                                        <option value="low" {{ old('priority', $order->priority) == 'low' ? 'selected' : '' }}>Low</option>
                                        <option value="medium" {{ old('priority', $order->priority) == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ old('priority', $order->priority) == 'high' ? 'selected' : '' }}>High</option>
                                        <option value="urgent" {{ old('priority', $order->priority) == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                    </select>
                                    @error('priority')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="client_address" class="form-label">Alamat Klien <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('client_address') is-invalid @enderror" 
                                              id="client_address" name="client_address" rows="3" required>{{ old('client_address', $order->client_address) }}</textarea>
                                    @error('client_address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="client_lat" class="form-label">Latitude (Opsional)</label>
                                    <input type="number" step="any" class="form-control @error('client_lat') is-invalid @enderror" 
                                           id="client_lat" name="client_lat" 
                                           value="{{ old('client_lat', $order->client_lat) }}" 
                                           placeholder="Contoh: -6.2088">
                                    @error('client_lat')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="client_lng" class="form-label">Longitude (Opsional)</label>
                                    <input type="number" step="any" class="form-control @error('client_lng') is-invalid @enderror" 
                                           id="client_lng" name="client_lng" 
                                           value="{{ old('client_lng', $order->client_lng) }}" 
                                           placeholder="Contoh: 106.8456">
                                    @error('client_lng')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <hr>

                            <!-- Job Details -->
                            <h6 class="mb-3">Detail Pekerjaan</h6>

                            <!-- Mitra Selection -->
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="mitra_id" class="form-label">
                                        <i class="bi bi-building text-info"></i> Mitra (Opsional)
                                    </label>
                                    <select name="mitra_id" id="mitra_id" class="form-control @error('mitra_id') is-invalid @enderror">
                                        <option value="">-- Tanpa Mitra (Dikerjakan Internal) --</option>
                                        @foreach($mitras as $mitra)
                                            <option value="{{ $mitra->id }}" 
                                                {{ old('mitra_id', $order->mitra_id) == $mitra->id ? 'selected' : '' }}>
                                                {{ $mitra->nama }} 
                                                @if($mitra->no_telp)
                                                    - {{ $mitra->no_telp }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('mitra_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">
                                        Pilih mitra jika pekerjaan ini akan dikerjakan oleh vendor/mitra eksternal. 
                                        Kosongkan jika dikerjakan oleh teknisi internal.
                                    </small>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="title" class="form-label">Judul Pekerjaan <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                           id="title" name="title" 
                                           value="{{ old('title', $order->title) }}" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="description" class="form-label">Deskripsi Pekerjaan <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" name="description" rows="5" required>{{ old('description', $order->description) }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="admin_notes" class="form-label">Catatan Admin (Opsional)</label>
                                    <textarea class="form-control @error('admin_notes') is-invalid @enderror" 
                                              id="admin_notes" name="admin_notes" rows="3">{{ old('admin_notes', $order->admin_notes) }}</textarea>
                                    @error('admin_notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Catatan internal untuk admin/teknisi</small>
                                </div>
                            </div>

                            <hr>

                            <!-- Info untuk Teknisi -->
                            <h6 class="mb-3"><i class="bi bi-info-circle text-primary"></i> Informasi untuk Teknisi</h6>
                            
                            <!-- Info Foto 1 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="label_info_foto1" class="form-label">Label Info Foto 1</label>
                                    <input type="text" class="form-control" id="label_info_foto1" name="label_info_foto1" 
                                           value="{{ old('label_info_foto1', $order->label_info_foto1) }}" 
                                           placeholder="Contoh: Foto Lokasi Pemasangan">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Info Foto 1</label>
                                    @if($order->info_foto1)
                                        <div class="mb-2">
                                            <img src="{{ asset('uploads/orders/' . $order->id . '/' . $order->info_foto1) }}" 
                                                 class="img-thumbnail" style="max-height: 150px;">
                                            <div class="mt-2">
                                                <button type="button" class="btn btn-sm btn-danger" 
                                                        onclick="deleteOrderImage({{ $order->id }}, 'info_foto1')">
                                                    <i class="bi bi-trash"></i> Hapus
                                                </button>
                                                <button type="button" class="btn btn-sm btn-warning" 
                                                        onclick="document.getElementById('new_info_foto1').click()">
                                                    <i class="bi bi-arrow-repeat"></i> Ganti
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <input type="file" class="form-control" id="new_info_foto1" name="info_foto1" 
                                           accept="image/*" style="{{ $order->info_foto1 ? 'display:none' : '' }}">
                                    <small class="text-muted">Format: JPG, PNG (Max 2MB)</small>
                                </div>
                            </div>

                            <!-- Info Foto 2 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="label_info_foto2" class="form-label">Label Info Foto 2</label>
                                    <input type="text" class="form-control" id="label_info_foto2" name="label_info_foto2" 
                                           value="{{ old('label_info_foto2', $order->label_info_foto2) }}" 
                                           placeholder="Contoh: Denah Ruangan">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Info Foto 2</label>
                                    @if($order->info_foto2)
                                        <div class="mb-2">
                                            <img src="{{ asset('uploads/orders/' . $order->id . '/' . $order->info_foto2) }}" 
                                                 class="img-thumbnail" style="max-height: 150px;">
                                            <div class="mt-2">
                                                <button type="button" class="btn btn-sm btn-danger" 
                                                        onclick="deleteOrderImage({{ $order->id }}, 'info_foto2')">
                                                    <i class="bi bi-trash"></i> Hapus
                                                </button>
                                                <button type="button" class="btn btn-sm btn-warning" 
                                                        onclick="document.getElementById('new_info_foto2').click()">
                                                    <i class="bi bi-arrow-repeat"></i> Ganti
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <input type="file" class="form-control" id="new_info_foto2" name="info_foto2" 
                                           accept="image/*" style="{{ $order->info_foto2 ? 'display:none' : '' }}">
                                    <small class="text-muted">Format: JPG, PNG (Max 2MB)</small>
                                </div>
                            </div>

                            <!-- Info Dokumen 1 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="label_info_file1" class="form-label">Label Dokumen 1</label>
                                    <input type="text" class="form-control" id="label_info_file1" name="label_info_file1" 
                                           value="{{ old('label_info_file1', $order->label_info_file1) }}" 
                                           placeholder="Contoh: SOP Instalasi">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Dokumen 1</label>
                                    @if($order->info_file1)
                                        <div class="mb-2">
                                            <div class="alert alert-info py-2">
                                                <i class="bi bi-file-pdf"></i> {{ basename($order->info_file1) }}
                                                <div class="mt-2">
                                                    <a href="{{ asset($order->info_file1) }}" 
                                                       target="_blank" class="btn btn-sm btn-info">
                                                        <i class="bi bi-eye"></i> Lihat
                                                    </a>
                                                    <a href="{{ asset($order->info_file1) }}" 
                                                       download class="btn btn-sm btn-success">
                                                        <i class="bi bi-download"></i> Download
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-danger" 
                                                            onclick="deleteOrderImage({{ $order->id }}, 'info_file1')">
                                                        <i class="bi bi-trash"></i> Hapus
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-warning" 
                                                            onclick="document.getElementById('new_info_file1').click()">
                                                        <i class="bi bi-arrow-repeat"></i> Ganti
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <input type="file" class="form-control" id="new_info_file1" name="info_file1" 
                                           accept=".pdf" style="{{ $order->info_file1 ? 'display:none' : '' }}">
                                    <small class="text-muted">Format: PDF (Max 5MB)</small>
                                </div>
                            </div>

                            <!-- Info Dokumen 2 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="label_info_file2" class="form-label">Label Dokumen 2</label>
                                    <input type="text" class="form-control" id="label_info_file2" name="label_info_file2" 
                                           value="{{ old('label_info_file2', $order->label_info_file2) }}" 
                                           placeholder="Contoh: Checklist Pekerjaan">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Dokumen 2</label>
                                    @if($order->info_file2)
                                        <div class="mb-2">
                                            <div class="alert alert-info py-2">
                                                <i class="bi bi-file-pdf"></i> {{ basename($order->info_file2) }}
                                                <div class="mt-2">
                                                    <a href="{{ asset($order->info_file2) }}" 
                                                       target="_blank" class="btn btn-sm btn-info">
                                                        <i class="bi bi-eye"></i> Lihat
                                                    </a>
                                                    <a href="{{ asset($order->info_file2) }}" 
                                                       download class="btn btn-sm btn-success">
                                                        <i class="bi bi-download"></i> Download
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-danger" 
                                                            onclick="deleteOrderImage({{ $order->id }}, 'info_file2')">
                                                        <i class="bi bi-trash"></i> Hapus
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-warning" 
                                                            onclick="document.getElementById('new_info_file2').click()">
                                                        <i class="bi bi-arrow-repeat"></i> Ganti
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <input type="file" class="form-control" id="new_info_file2" name="info_file2" 
                                           accept=".pdf" style="{{ $order->info_file2 ? 'display:none' : '' }}">
                                    <small class="text-muted">Format: PDF (Max 5MB)</small>
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="d-flex justify-content-between">
                                        <a href="{{ route('orders.show', $order->id) }}" class="btn btn-secondary">
                                            <i class="bi bi-arrow-left"></i> Kembali
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-check-circle"></i> Update Order
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sub-category dropdown handler
    const typeRadios = document.querySelectorAll('input[name="type"]');
    const subCategorySelect = document.getElementById('sub_category');
    const subCategoryHint = document.getElementById('sub_category_hint');
    
    const subCategoryOptions = {
        psb: [
            { value: 'psb', label: 'PSB (Pemasangan Sambungan Baru)' }
        ],
        umum: [
            { value: 'gangguan', label: 'Gangguan' },
            { value: 'dismantle', label: 'Dismantle (Bongkar)' },
            { value: 'relokasi', label: 'Relokasi (Pindah Lokasi)' },
            { value: 'custom', label: 'Custom' }
        ]
    };

    function updateSubCategory() {
        const selectedType = document.querySelector('input[name="type"]:checked')?.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);
            });
            
            // Set saved value or default
            const savedValue = '{{ old("sub_category", $order->sub_category) }}';
            if (savedValue) {
                subCategorySelect.value = savedValue;
            } else {
                // Auto-select default
                subCategorySelect.value = selectedType === 'psb' ? 'psb' : 'gangguan';
            }
            
            if (selectedType === 'psb') {
                subCategoryHint.innerHTML = '<i class="bi bi-info-circle"></i> PSB selalu untuk Pemasangan Sambungan Baru';
            } else {
                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 order terlebih dahulu';
        }
    }

    typeRadios.forEach(radio => {
        radio.addEventListener('change', updateSubCategory);
    });
    
    // Initialize on page load
    updateSubCategory();
});

// Delete image/file function
function deleteOrderImage(orderId, fieldName) {
    if (!confirm('Yakin ingin menghapus file ini?')) {
        return;
    }
    
    fetch(`/admin/orders/${orderId}/delete-image`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ image_field: fieldName })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('File berhasil dihapus!');
            location.reload();
        } else {
            alert('Gagal menghapus file: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menghapus file');
    });
}
</script>
@endpush