@extends('layouts.app')

@section('title', 'Buat Tiket Baru')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-plus-circle me-2 text-primary"></i>
                        Buat Tiket Baru
                    </h1>
                    <p class="text-muted mb-0">Buat tiket laporan pelanggan baru</p>
                </div>
                <a href="{{ route('tickets.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>
                    Kembali
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Form -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-edit me-2"></i>
                        Form Tiket Baru
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('tickets.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- No Ticket (Auto Generated) -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-hashtag me-2 text-primary"></i>
                                    No. Tiket
                                </label>
                                <input type="text" class="form-control bg-light" 
                                       value="Auto Generated" readonly>
                                <div class="form-text">
                                    Nomor tiket akan dibuat otomatis saat disimpan
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-clock me-2 text-primary"></i>
                                    Waktu Laporan
                                </label>
                                <input type="text" class="form-control bg-light" 
                                       value="{{ now()->format('d/m/Y H:i:s') }}" readonly>
                                <div class="form-text">
                                    Waktu laporan saat ini
                                </div>
                            </div>
                        </div>

                        <!-- Nama Pelanggan -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="pelanggan_id" class="form-label fw-semibold">
                                    <i class="fas fa-user me-2 text-primary"></i>
                                    Nama Pelanggan <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('pelanggan_id') is-invalid @enderror" 
                                        id="pelanggan_id" name="pelanggan_id" required>
                                    <option value="">-- Pilih Pelanggan --</option>
                                    @foreach($pelanggans as $pelanggan)
                                        <option value="{{ $pelanggan->id }}" 
                                                data-whatsapp="{{ $pelanggan->no_hp_whatsapp }}"
                                                data-alamat="{{ $pelanggan->alamat_rumah }}"
                                                {{ old('pelanggan_id') == $pelanggan->id ? 'selected' : '' }}>
                                            {{ $pelanggan->nama_lengkap }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('pelanggan_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="no_wa_pelanggan" class="form-label fw-semibold">
                                    <i class="fab fa-whatsapp me-2 text-success"></i>
                                    No. WhatsApp Pelanggan
                                </label>
                                <input type="text" class="form-control bg-light" 
                                       id="no_wa_pelanggan" readonly 
                                       placeholder="Pilih pelanggan terlebih dahulu">
                                <div class="form-text">
                                    Nomor WhatsApp akan terisi otomatis
                                </div>
                            </div>
                        </div>

                        <!-- Kendala/Error -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label for="kendala_error" class="form-label fw-semibold">
                                    <i class="fas fa-exclamation-triangle me-2 text-warning"></i>
                                    Kendala/Error <span class="text-danger">*</span>
                                </label>
                                <textarea class="form-control @error('kendala_error') is-invalid @enderror" 
                                          id="kendala_error" name="kendala_error" rows="4" 
                                          placeholder="Jelaskan kendala atau error yang dialami pelanggan..." required>{{ old('kendala_error') }}</textarea>
                                @error('kendala_error')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    Jelaskan dengan detail kendala yang dialami
                                </div>
                            </div>
                        </div>

                        <!-- Kategori Ticket -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="kategori_ticket" class="form-label fw-semibold">
                                    <i class="fas fa-tags me-2 text-info"></i>
                                    Kategori Tiket <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('kategori_ticket') is-invalid @enderror" 
                                        id="kategori_ticket" name="kategori_ticket" required>
                                    <option value="">-- Pilih Kategori --</option>
                                    @foreach($kategoris as $kategori)
                                        <option value="{{ $kategori }}" {{ old('kategori_ticket') == $kategori ? 'selected' : '' }}>
                                            {{ $kategori }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('kategori_ticket')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="teknisi_id" class="form-label fw-semibold">
                                    <i class="fas fa-user-cog me-2 text-secondary"></i>
                                    Nama Teknisi (Opsional)
                                </label>
                                <select class="form-select @error('teknisi_id') is-invalid @enderror" 
                                        id="teknisi_id" name="teknisi_id">
                                    <option value="">-- Pilih Teknisi --</option>
                                    @foreach($teknisis as $teknisi)
                                        <option value="{{ $teknisi->id }}" {{ old('teknisi_id') == $teknisi->id ? 'selected' : '' }}>
                                            {{ $teknisi->user->name }} - {{ $teknisi->jabatan }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('teknisi_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    Bisa ditugaskan nanti jika belum ada
                                </div>
                            </div>
                        </div>

                        <!-- Foto Laporan -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label for="foto_laporan" class="form-label fw-semibold">
                                    <i class="fas fa-camera me-2 text-primary"></i>
                                    Foto Laporan (Opsional)
                                </label>
                                <input type="file" class="form-control @error('foto_laporan') is-invalid @enderror" 
                                       id="foto_laporan" name="foto_laporan" accept="image/*">
                                @error('foto_laporan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    Upload foto pendukung laporan (JPG, PNG, maksimal 2MB)
                                </div>
                                <!-- Preview -->
                                <div id="foto_preview" class="mt-3" style="display: none;">
                                    <img id="preview_image" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-3">
                                    <a href="{{ route('tickets.index') }}" class="btn btn-outline-secondary px-4">
                                        <i class="fas fa-times me-2"></i>
                                        Batal
                                    </a>
                                    <button type="submit" class="btn btn-primary px-4">
                                        <i class="fas fa-save me-2"></i>
                                        Simpan Tiket
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Info Panel -->
        <div class="col-lg-4">
            <!-- Info Pelanggan -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-user me-2"></i>
                        Info Pelanggan
                    </h6>
                </div>
                <div class="card-body">
                    <div id="pelanggan-info">
                        <div class="text-center text-muted">
                            <i class="fas fa-info-circle fa-2x mb-2"></i>
                            <p class="mb-0">Pilih pelanggan untuk melihat informasi</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tips -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-warning text-dark">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-lightbulb me-2"></i>
                        Tips Membuat Tiket
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Jelaskan kendala dengan detail dan jelas</small>
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Pilih kategori yang sesuai dengan masalah</small>
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Upload foto jika diperlukan untuk memperjelas</small>
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Pastikan data pelanggan sudah benar</small>
                        </li>
                        <li class="mb-0">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Teknisi bisa ditugaskan setelah tiket dibuat</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const pelangganSelect = document.getElementById('pelanggan_id');
    const noWaInput = document.getElementById('no_wa_pelanggan');
    const pelangganInfo = document.getElementById('pelanggan-info');
    const fotoInput = document.getElementById('foto_laporan');
    const fotoPreview = document.getElementById('foto_preview');
    const previewImage = document.getElementById('preview_image');

    // Handle pelanggan selection
    pelangganSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        
        if (selectedOption.value) {
            const whatsapp = selectedOption.getAttribute('data-whatsapp');
            const alamat = selectedOption.getAttribute('data-alamat');
            const nama = selectedOption.text;
            
            // Update WhatsApp field
            noWaInput.value = whatsapp || '';
            
            // Update info panel
            pelangganInfo.innerHTML = `
                <div class="mb-3">
                    <div class="fw-semibold text-primary mb-2">
                        <i class="fas fa-user me-2"></i>
                        ${nama}
                    </div>
                    <div class="text-muted small mb-2">
                        <i class="fab fa-whatsapp me-2 text-success"></i>
                        ${whatsapp || 'Tidak ada nomor WhatsApp'}
                    </div>
                    <div class="text-muted small">
                        <i class="fas fa-map-marker-alt me-2 text-danger"></i>
                        ${alamat || 'Alamat tidak tersedia'}
                    </div>
                </div>
            `;
        } else {
            noWaInput.value = '';
            pelangganInfo.innerHTML = `
                <div class="text-center text-muted">
                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                    <p class="mb-0">Pilih pelanggan untuk melihat informasi</p>
                </div>
            `;
        }
    });

    // Handle foto preview
    fotoInput.addEventListener('change', function() {
        const file = this.files[0];
        
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                fotoPreview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            fotoPreview.style.display = 'none';
        }
    });
});
</script>
@endpush