@extends('layouts.app')

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

@section('content')
    <div class="page-wrapper">
        <div class="container-xl">
            <!-- Page header -->
            <div class="page-header d-print-none">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('user.tickets.index') }}">Support Ticket</a>
                                </li>
                                <li class="breadcrumb-item active">Buat Ticket Baru</li>
                            </ol>
                        </nav>
                        <h2 class="page-title">
                            <i class="ti ti-ticket-plus me-2"></i>
                            Buat Ticket Baru
                        </h2>
                        <div class="text-muted mt-1">Kirim pertanyaan atau laporkan masalah kepada tim support kami</div>
                    </div>
                    <div class="col-auto ms-auto d-print-none">
                        <div class="btn-list">
                            <a href="{{ route('user.tickets.index') }}" class="btn btn-outline-primary">
                                <i class="ti ti-arrow-left me-2"></i>
                                Kembali ke Daftar Ticket
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Page body -->
            <div class="page-body">
                <div class="row row-cards">
                    <div class="col-lg-8 mx-auto">
                        <form class="card" action="{{ route('user.tickets.store') }}" method="POST">
                            @csrf
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-edit me-2"></i>
                                    Informasi Ticket
                                </h3>
                                <div class="card-subtitle">
                                    Isi form dibawah dengan lengkap untuk mendapatkan bantuan yang tepat
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label required">Kategori</label>
                                            <select name="category"
                                                class="form-select @error('category') is-invalid @enderror" required>
                                                <option value="">Pilih Kategori</option>
                                                <option value="support"
                                                    {{ old('category') == 'support' ? 'selected' : '' }}>Support Umum
                                                </option>
                                                <option value="teknikal"
                                                    {{ old('category') == 'teknikal' ? 'selected' : '' }}>Masalah Teknis
                                                </option>
                                                <option value="billing"
                                                    {{ old('category') == 'billing' ? 'selected' : '' }}>Pembayaran &
                                                    Billing</option>
                                                <option value="umum" {{ old('category') == 'umum' ? 'selected' : '' }}>
                                                    Pertanyaan Umum</option>
                                                <option value="lainnya"
                                                    {{ old('category') == 'lainnya' ? 'selected' : '' }}>Lainnya</option>
                                            </select>
                                            @if ($errors->has('category'))
                                                <div class="invalid-feedback">{{ $errors->first('category') }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Prioritas</label>
                                            <select name="priority" class="form-select">
                                                <option value="normal"
                                                    {{ old('priority', 'normal') == 'normal' ? 'selected' : '' }}>Normal
                                                </option>
                                                <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>
                                                    Tinggi</option>
                                                <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>
                                                    Mendesak</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label required">Subjek</label>
                                    <input type="text" name="subject"
                                        class="form-control @error('subject') is-invalid @enderror"
                                        placeholder="Ringkasan singkat masalah atau pertanyaan Anda"
                                        value="{{ old('subject') }}" required>
                                    @if ($errors->has('subject'))
                                        <div class="invalid-feedback">{{ $errors->first('subject') }}</div>
                                    @endif
                                </div>

                                <div class="mb-3">
                                    <label class="form-label required">Deskripsi Detail</label>
                                    <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="8"
                                        placeholder="Jelaskan masalah atau pertanyaan Anda dengan detail. Sertakan langkah-langkah yang sudah dicoba jika ada."
                                        required>{{ old('description') }}</textarea>
                                    @if ($errors->has('description'))
                                        <div class="invalid-feedback">{{ $errors->first('description') }}</div>
                                    @endif
                                    <div class="form-hint">
                                        <i class="ti ti-info-circle me-1"></i>
                                        Semakin detail informasi yang Anda berikan, semakin cepat kami dapat membantu
                                        menyelesaikan masalah.
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <div class="text-muted">
                                            <i class="ti ti-clock me-1"></i>
                                            Tim support kami akan merespon dalam 1x24 jam
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="btn-list">
                                            <a href="{{ route('user.tickets.index') }}" class="btn btn-outline-secondary">
                                                Batal
                                            </a>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="ti ti-send me-2"></i>
                                                Kirim Ticket
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Help Sidebar -->
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-help me-2"></i>
                                    Tips Mengisi Ticket
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="list-group list-group-flush">
                                    <div class="list-group-item">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="badge bg-blue">1</span>
                                            </div>
                                            <div class="col">
                                                <strong>Pilih kategori yang tepat</strong>
                                                <div class="text-muted">Membantu kami mengarahkan ke tim yang sesuai</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="list-group-item">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="badge bg-green">2</span>
                                            </div>
                                            <div class="col">
                                                <strong>Subjek yang jelas</strong>
                                                <div class="text-muted">Buat subjek yang singkat tapi informatif</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="list-group-item">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="badge bg-yellow">3</span>
                                            </div>
                                            <div class="col">
                                                <strong>Detail yang lengkap</strong>
                                                <div class="text-muted">Sertakan screenshot atau langkah reproduce jika
                                                    perlu</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- FAQ Card -->
                        <div class="card mt-3">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-question-mark me-2"></i>
                                    Pertanyaan Umum
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="text-muted mb-3">
                                    Mungkin pertanyaan Anda sudah terjawab di FAQ kami:
                                </div>
                                <div class="d-grid gap-2">
                                    <a href="#" class="btn btn-outline-primary btn-sm">
                                        <i class="ti ti-external-link me-2"></i>
                                        Lihat FAQ
                                    </a>
                                    <a href="#" class="btn btn-outline-secondary btn-sm">
                                        <i class="ti ti-book me-2"></i>
                                        Panduan Pengguna
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const categorySelect = document.querySelector('select[name="category"]');
            const subjectInput = document.querySelector('input[name="subject"]');
            const descriptionTextarea = document.querySelector('textarea[name="description"]');

            // Auto-resize textarea
            if (descriptionTextarea) {
                descriptionTextarea.addEventListener('input', function() {
                    this.style.height = 'auto';
                    this.style.height = (this.scrollHeight) + 'px';
                });
            }

            // Category change handler - populate suggested subjects
            if (categorySelect) {
                categorySelect.addEventListener('change', function() {
                    const category = this.value;
                    const suggestions = {
                        'teknikal': [
                            'Tidak bisa login ke akun',
                            'Error saat upload file',
                            'Website tidak bisa diakses',
                            'Fitur tidak berfungsi'
                        ],
                        'billing': [
                            'Pertanyaan tentang pembayaran',
                            'Masalah dengan invoice',
                            'Refund request',
                            'Upgrade/downgrade paket'
                        ],
                        'support': [
                            'Cara menggunakan fitur',
                            'Bantuan pengaturan akun',
                            'Pertanyaan umum',
                            'Tutorial penggunaan'
                        ],
                        'umum': [
                            'Informasi produk',
                            'Kerjasama bisnis',
                            'Feedback dan saran'
                        ]
                    };

                    if (suggestions[category] && subjectInput.value === '') {
                        // Show suggestions in a dropdown or placeholder
                        const placeholder = suggestions[category][0];
                        subjectInput.placeholder = `Contoh: ${placeholder}`;
                    }
                });
            }

            // Form submission with validation
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                const category = categorySelect.value;
                const subject = subjectInput.value.trim();
                const description = descriptionTextarea.value.trim();

                // Client-side validation
                if (!category) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Kategori Diperlukan',
                        text: 'Silakan pilih kategori untuk ticket Anda.',
                        confirmButtonText: 'OK'
                    });
                    categorySelect.focus();
                    return;
                }

                if (!subject) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Subjek Diperlukan',
                        text: 'Silakan isi subjek ticket Anda.',
                        confirmButtonText: 'OK'
                    });
                    subjectInput.focus();
                    return;
                }

                if (subject.length < 5) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Subjek Terlalu Pendek',
                        text: 'Subjek harus minimal 5 karakter.',
                        confirmButtonText: 'OK'
                    });
                    subjectInput.focus();
                    return;
                }

                if (!description) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Deskripsi Diperlukan',
                        text: 'Silakan jelaskan masalah atau pertanyaan Anda.',
                        confirmButtonText: 'OK'
                    });
                    descriptionTextarea.focus();
                    return;
                }

                if (description.length < 20) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Deskripsi Terlalu Pendek',
                        text: 'Deskripsi harus minimal 20 karakter untuk memberikan informasi yang cukup.',
                        confirmButtonText: 'OK'
                    });
                    descriptionTextarea.focus();
                    return;
                }

                // Show loading
                Swal.fire({
                    title: 'Mengirim Ticket...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Submit the form
                this.submit();
            });

            // Show success message if redirected with success
            @if (session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Ticket Berhasil Dibuat!',
                    text: '{{ session('success') }}',
                    confirmButtonText: 'OK'
                });
            @endif

            @if (session('error'))
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal Membuat Ticket',
                    text: '{{ session('error') }}',
                    confirmButtonText: 'OK'
                });
            @endif
        });
    </script>
@endsection