@php
            $success = session('success');
            if (!$success && request()->isMethod('POST')) {
                $data = request()->validate([
                    'name' => 'required|string|max:255',
                    'email' => 'nullable|email|max:255',
                    'subject' => 'required|string|max:255',
                    'feedback' => 'required|string',
                    'type' => 'nullable|string|max:255',
                    'cat' => 'nullable|string|max:255',
                ]);
                $data['ticket_no'] = \App\Models\Backend\ContentFeedbackMain::generateTicketNo();
                $data['status'] = 'PENDING';
                \App\Models\Backend\ContentFeedbackMain::create($data);
                $success = true;
            }
            @endphp
            <section class="contact-section">
                <div class="container">
                    <div class="contact-header">
                        <span class="contact-badge">Hubungi Kami</span>
                        <h1 class="contact-title">Hubungi Kami</h1>
                        <p class="contact-subtitle">Ada sebarang pertanyaan atau maklum balas? Jangan ragu untuk menghubungi kami.</p>
                    </div>
            
                    <div class="contact-grid">
                        <div class="contact-info">
                            <div class="contact-info-card">
                                <div class="contact-info-icon"><i class="fas fa-map-marker-alt"></i></div>
                                <h3>Alamat</h3>
                                <p>Aras 1, Pusat Pentadbiran Kerajaan Persekutuan<br>Putrajaya</p>
                            </div>
                            <div class="contact-info-card">
                                <div class="contact-info-icon"><i class="fas fa-phone-alt"></i></div>
                                <h3>Telefon</h3>
                                <p>03-8000 8000</p>
                                <span class="contact-info-note">Isnin - Jumaat, 8:00 PG - 5:00 PTG</span>
                            </div>
                            <div class="contact-info-card">
                                <div class="contact-info-icon"><i class="fas fa-envelope"></i></div>
                                <h3>Emel</h3>
                                <p>admin@jabatan.gov.my</p>
                            </div>
                        </div>
            
                        <div class="contact-form-wrap">
                            @if($success)
                            <div class="contact-success">
                                <i class="fas fa-check-circle"></i>
                                <h3>Berjaya Dihantar!</h3>
                                <p>Pesan anda telah dihantar. Terima kasih!</p>
                            </div>
                            @else
                            <form method="POST" action="{{ request()->url() }}" class="contact-form">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="name">Nama Penuh <span class="required">*</span></label>
                                        <input type="text" id="name" name="name" required placeholder="Masukkan nama penuh" value="{{ old('name') }}">
                                        @error('name') <span class="form-error">{{ $message }}</span> @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="email">Emel</label>
                                        <input type="email" id="email" name="email" placeholder="Masukkan alamat emel" value="{{ old('email') }}">
                                        @error('email') <span class="form-error">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="type">Jenis <span class="required">*</span></label>
                                        <select id="type" name="type" required>
                                            <option value="">-- Pilih Jenis --</option>
                                            <option value="INQUIRY" {{ old('type') == 'INQUIRY' ? 'selected' : '' }}>Pertanyaan</option>
                                            <option value="FEEDBACK" {{ old('type') == 'FEEDBACK' ? 'selected' : '' }}>Maklum Balas</option>
                                            <option value="COMPLAINT" {{ old('type') == 'COMPLAINT' ? 'selected' : '' }}>Aduan</option>
                                            <option value="SUGGESTION" {{ old('type') == 'SUGGESTION' ? 'selected' : '' }}>Cadangan</option>
                                            <option value="REQUEST" {{ old('type') == 'REQUEST' ? 'selected' : '' }}>Permintaan</option>
                                        </select>
                                        @error('type') <span class="form-error">{{ $message }}</span> @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="cat">Kategori</label>
                                        <select id="cat" name="cat">
                                            <option value="">-- Pilih Kategori --</option>
                                            <option value="ACCOUNTS" {{ old('cat') == 'ACCOUNTS' ? 'selected' : '' }}>Akaun</option>
                                            <option value="OTHERS" {{ old('cat') == 'OTHERS' ? 'selected' : '' }}>Lain-lain</option>
                                        </select>
                                        @error('cat') <span class="form-error">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="subject">Subjek <span class="required">*</span></label>
                                    <input type="text" id="subject" name="subject" required placeholder="Masukkan subjek" value="{{ old('subject') }}">
                                    @error('subject') <span class="form-error">{{ $message }}</span> @enderror
                                </div>
                                <div class="form-group">
                                    <label for="feedback">Mesej <span class="required">*</span></label>
                                    <textarea id="feedback" name="feedback" rows="6" required placeholder="Tulis mesej anda di sini...">{{ old('feedback') }}</textarea>
                                    @error('feedback') <span class="form-error">{{ $message }}</span> @enderror
                                </div>
                                <button type="submit" class="contact-submit-btn"><i class="fas fa-paper-plane"></i> Hantar Mesej</button>
                            </form>
                            @endif
                        </div>
                    </div>
                </div>
            </section>
            
            <style>
            .contact-section {
                padding: 60px 0 80px;
                background: var(--gray-50);
                min-height: 60vh;
            }
            .contact-header {
                text-align: center;
                margin-bottom: 50px;
            }
            .contact-badge {
                display: inline-block;
                background: var(--accent-light);
                color: var(--accent);
                padding: 6px 16px;
                border-radius: 999px;
                font-size: 0.75rem;
                font-weight: 600;
                margin-bottom: 16px;
            }
            .contact-title {
                font-size: 2rem;
                font-weight: 700;
                color: var(--gray-900);
                margin: 0 0 12px;
            }
            .contact-subtitle {
                color: var(--gray-400);
                font-size: 1rem;
                margin: 0;
            }
            .contact-grid {
                display: grid;
                grid-template-columns: 1fr 1.5fr;
                gap: 40px;
                max-width: 1000px;
                margin: 0 auto;
                align-items: start;
            }
            .contact-info {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            .contact-info-card {
                background: var(--white);
                padding: 24px;
                border-radius: 16px;
                border: 1px solid var(--gray-200);
                transition: box-shadow 0.2s;
            }
            .contact-info-card:hover {
                box-shadow: var(--shadow-md);
            }
            .contact-info-icon {
                width: 44px;
                height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--accent-light);
                color: var(--accent);
                border-radius: 12px;
                font-size: 1.1rem;
                margin-bottom: 14px;
            }
            .contact-info-card h3 {
                font-size: 0.95rem;
                font-weight: 600;
                color: var(--gray-900);
                margin: 0 0 6px;
            }
            .contact-info-card p {
                font-size: 0.85rem;
                color: var(--gray-600);
                margin: 0;
                line-height: 1.6;
            }
            .contact-info-note {
                display: block;
                font-size: 0.75rem;
                color: var(--gray-400);
                margin-top: 4px;
            }
            .contact-form-wrap {
                background: var(--white);
                padding: 32px;
                border-radius: 16px;
                border: 1px solid var(--gray-200);
            }
            .contact-form {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
            .form-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }
            .form-group {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .form-group label {
                font-size: 0.85rem;
                font-weight: 500;
                color: var(--gray-700);
            }
            .required { color: var(--accent); }
            .form-group input,
            .form-group select,
            .form-group textarea {
                padding: 10px 14px;
                border: 1px solid var(--gray-200);
                border-radius: 10px;
                font-size: 0.9rem;
                font-family: inherit;
                color: var(--gray-800);
                background: var(--white);
                transition: border-color 0.2s;
                outline: none;
                width: 100%;
            }
            .form-group input:focus,
            .form-group select:focus,
            .form-group textarea:focus {
                border-color: var(--primary);
            }
            .form-group textarea { resize: vertical; }
            .form-error {
                font-size: 0.75rem;
                color: var(--accent);
            }
            .contact-submit-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 14px 32px;
                background: var(--primary);
                color: var(--white);
                border: none;
                border-radius: 10px;
                font-size: 0.9rem;
                font-weight: 500;
                cursor: pointer;
                transition: background 0.2s;
                width: 100%;
            }
            .contact-submit-btn:hover {
                background: var(--primary-light);
            }
            .contact-submit-btn i { font-size: 0.85rem; }
            .contact-success {
                text-align: center;
                padding: 40px 20px;
            }
            .contact-success i {
                font-size: 3rem;
                color: var(--teal);
                margin-bottom: 16px;
            }
            .contact-success h3 {
                font-size: 1.2rem;
                font-weight: 600;
                color: var(--gray-900);
                margin: 0 0 8px;
            }
            .contact-success p {
                color: var(--gray-400);
                font-size: 0.9rem;
                margin: 0;
            }
            @media (max-width: 768px) {
                .contact-section { padding: 30px 0 50px; }
                .contact-title { font-size: 1.4rem; }
                .contact-grid { grid-template-columns: 1fr; gap: 24px; }
                .form-row { grid-template-columns: 1fr; }
                .contact-form-wrap { padding: 24px; }
            }
            @media (max-width: 480px) {
                .contact-title { font-size: 1.2rem; }
                .contact-form-wrap { padding: 20px; }
            }
            </style>