@extends('layouts.app')
@section('title', 'تذكرة جديدة')
@section('sidebar') @include('customer._sidebar') @endsection
@section('content')
<div class="max-w-2xl">
    <h1 class="text-xl font-bold mb-2">فتح تذكرة دعم فني جديدة</h1>
    <p class="text-sm text-gray-500 mb-6">
        رصيدك الحالي:
        <span class="font-medium {{ $balance === 0 ? 'text-red-600' : 'text-indigo-600' }}">
            {{ is_null($balance) ? 'غير محدود ∞' : $balance.' تذكرة' }}
        </span>
        @if($balance === 0)
            — <a href="{{ route('customer.packages.index') }}" class="text-indigo-600 hover:underline">اشترِ باقة أولاً</a>
        @endif
    </p>

    <form method="POST" action="{{ route('customer.tickets.store') }}" class="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
        @csrf
        <div>
            <label class="block text-sm mb-1">القسم / التخصص</label>
            <select name="department_id" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                @foreach($departments as $dept)
                    <option value="{{ $dept->id }}">{{ $dept->name_ar }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm mb-1">عنوان التذكرة</label>
            <input type="text" name="subject" required value="{{ old('subject') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2">
        </div>
        <div>
            <label class="block text-sm mb-1">وصف المشكلة</label>
            <textarea name="description" rows="5" required class="w-full border border-gray-300 rounded-lg px-3 py-2">{{ old('description') }}</textarea>
        </div>
        <div>
            <label class="block text-sm mb-1">الأولوية</label>
            <select name="priority" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                <option value="low">منخفضة</option>
                <option value="medium" selected>متوسطة</option>
                <option value="high">عالية</option>
                <option value="urgent">عاجلة</option>
            </select>
        </div>
        @if(auth()->user()->whatsapp_number)
        <label class="flex items-center gap-2 text-sm text-gray-600">
            <input type="checkbox" name="notify_whatsapp" value="1"> إشعاري عبر واتساب أيضًا عند الرد
        </label>
        @endif
        <button class="bg-indigo-600 text-white rounded-lg px-6 py-2.5 font-medium hover:bg-indigo-700">إرسال التذكرة</button>
    </form>
</div>
@endsection