@extends('layouts.customer')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <a href="{{ route('customer.support') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-[#0D6B58] mb-6 transition">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Support
    </a>

    <h1 class="text-2xl font-bold text-gray-900 mb-8">Create Support Ticket</h1>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sm:p-8">
        @if($errors->any())
        <div class="bg-rose-50 border border-rose-200 rounded-lg p-4 mb-6">
            @foreach($errors->all() as $error)
            <p class="text-sm text-rose-700">{{ $error }}</p>
            @endforeach
        </div>
        @endif

        <form method="POST" action="{{ route('customer.support.store') }}">
            @csrf

            <div class="space-y-5">
                <div>
                    <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                    <input type="text" name="subject" id="subject" value="{{ old('subject') }}" placeholder="Brief description of your issue" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                    @error('subject')
                    <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                        <select name="category" id="category" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                            <option value="">Select category</option>
                            <option value="general" {{ old('category') === 'general' ? 'selected' : '' }}>General Inquiry</option>
                            <option value="account" {{ old('category') === 'account' ? 'selected' : '' }}>Account Issue</option>
                            <option value="transaction" {{ old('category') === 'transaction' ? 'selected' : '' }}>Transaction Problem</option>
                            <option value="card" {{ old('category') === 'card' ? 'selected' : '' }}>Card Issue</option>
                            <option value="security" {{ old('category') === 'security' ? 'selected' : '' }}>Security Concern</option>
                            <option value="technical" {{ old('category') === 'technical' ? 'selected' : '' }}>Technical Issue</option>
                            <option value="complaint" {{ old('category') === 'complaint' ? 'selected' : '' }}>Complaint</option>
                            <option value="other" {{ old('category') === 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('category')
                        <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="priority" class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
                        <select name="priority" id="priority" class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                            <option value="low" {{ old('priority', 'low') === 'low' ? 'selected' : '' }}>Low</option>
                            <option value="medium" {{ old('priority') === 'medium' ? 'selected' : '' }}>Medium</option>
                            <option value="high" {{ old('priority') === 'high' ? 'selected' : '' }}>High</option>
                            <option value="urgent" {{ old('priority') === 'urgent' ? 'selected' : '' }}>Urgent</option>
                        </select>
                        @error('priority')
                        <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
                    <textarea name="message" id="message" rows="6" placeholder="Describe your issue in detail..." class="w-full px-4 py-3 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] resize-none" required>{{ old('message') }}</textarea>
                    @error('message')
                    <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                </div>

                @if(isset($transactionReference))
                <input type="hidden" name="transaction_reference" value="{{ $transactionReference }}">
                @endif

                <button type="submit" class="w-full py-3 bg-[#0D6B58] text-white font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                    Submit Ticket
                </button>
            </div>
        </form>
    </div>

</div>
@endsection