@extends('user.layouts.app')

@section('title')
    تقديم شكوى أو اقتراح
@endsection

@section('content')
    <div class="content-wrapper">

        <a href="{{ route('complaints.index') }}" class="back-link">
            <x-lucide-arrow-right width="16" height="16" />
            <span>العودة للشكاوى والاقتراحات</span>
        </a>

        <div class="page-header">
            <x-lucide-message-square width="24" height="24" />
            <h1>تقديم شكوى أو اقتراح</h1>
        </div>

        <div class="container">
            <form action="{{ route('complaints.store') }}" method="POST" enctype="multipart/form-data"
                class="form-container">
                @csrf

                <div class="form-header">
                    <p>يرجى تعبئة النموذج التالي لتقديم شكوى أو اقتراح</p>
                </div>

                {{-- نوع الطلب --}}
                <div class="form-row">
                    <div class="input-group">
                        <label for="type">نوع الطلب <span class="text-danger">*</span></label>
                        <div class="input-wrapper">
                            <select name="type" id="type" required>
                                <option value="" disabled {{ old('type') ? '' : 'selected' }}>اختر نوع الطلب</option>
                                <option value="complaint" {{ old('type') === 'complaint' ? 'selected' : '' }}>شكوى</option>
                                <option value="suggestion" {{ old('type') === 'suggestion' ? 'selected' : '' }}>اقتراح</option>
                            </select>
                        </div>
                        @error('type')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- الموضوع --}}
                <div class="form-row">
                    <div class="input-group">
                        <label for="subject">الموضوع <span class="text-danger">*</span></label>
                        <div class="input-wrapper">
                            <input type="text" name="subject" id="subject" value="{{ old('subject') }}"
                                placeholder="أدخل موضوع الشكوى أو الاقتراح" maxlength="255" required>
                        </div>
                        @error('subject')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- التفاصيل --}}
                <div class="form-row">
                    <div class="input-group">
                        <label for="message">التفاصيل <span class="text-danger">*</span></label>
                        <div class="input-wrapper">
                            <textarea name="message" id="message" rows="5"
                                placeholder="اكتب تفاصيل الشكوى أو الاقتراح هنا..." maxlength="5000"
                                required>{{ old('message') }}</textarea>
                        </div>
                        @error('message')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- صورة مرفقة (اختياري) --}}
                <div class="form-row">
                    <div class="input-group file-upload">
                        <span class="file-field-label">صورة مرفقة (اختياري)</span>
                        <label class="input-wrapper" for="image">
                            <input name="image" type="file" id="image" class="file-input"
                                accept="image/jpeg,image/png,image/jpg">
                            <span class="file-prefix">
                                <svg viewBox="0 0 24 24">
                                    <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
                                </svg>
                                <span>اختر صورة</span>
                            </span>
                            <span class="file-name" id="image_name">لم يتم اختيار ملف</span>
                        </label>
                        <div class="image-preview" id="image_preview">
                            <img id="image_img" src="" alt="معاينة الصورة المرفقة">
                            <div class="image-preview-overlay">
                                <div class="preview-text">الصورة المرفقة</div>
                            </div>
                            <button type="button" class="remove-image" onclick="removeImage('image')">×</button>
                        </div>
                        <small class="text-muted">الصيغ المسموحة: jpeg, png, jpg — الحد الأقصى: 2 ميغابايت</small>
                        @error('image')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <button type="submit" class="submit-btn">إرسال</button>
            </form>
        </div>
    </div>
@endsection