@extends('layouts.app')  

@section('content')
<div class="max-w-xl mx-auto py-10 px-4">
    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Submit Support Ticket</h2>

    {{-- Validation Errors --}}
    @if ($errors->any())
        <div class="mb-4 p-4 bg-red-100 text-red-700 rounded border border-red-300">
            <ul class="list-disc ml-5 text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Success Message --}}
    @if (session('success'))
        <div class="mb-4 p-4 bg-green-100 text-green-700 rounded border border-green-300">
            {{ session('success') }}
        </div>
    @endif

    {{-- Ticket Form --}}
    <form action="{{ route('tickets.store') }}" method="POST" class="space-y-6 bg-white p-6 rounded-lg shadow border border-gray-200">
        @csrf

        {{-- Category --}}
        <div>
            <label for="category" class="block font-medium text-gray-700 mb-1">Category</label>
            <select id="category" name="category" required
                    class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="" disabled selected>Select a category</option>
                <option value="Account Issue" {{ old('category') === 'Account Issue' ? 'selected' : '' }}>Account Issue</option>
                <option value="Property property" {{ old('category') === 'Property property' ? 'selected' : '' }}>Property property</option>
                <option value="Payment" {{ old('category') === 'Payment' ? 'selected' : '' }}>Payment</option>
                <option value="Technical Bug" {{ old('category') === 'Technical Bug' ? 'selected' : '' }}>Technical Bug</option>
                <option value="Other" {{ old('category') === 'Other' ? 'selected' : '' }}>Other</option>
            </select>
        </div>

        {{-- Message --}}
        <div>
            <label for="message" class="block font-medium text-gray-700 mb-1">Message</label>
            <textarea id="message" name="message" rows="5" required
                      placeholder="Please describe your issue in detail..."
                      class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('message') }}</textarea>
        </div>

        {{-- Submit --}}
        <div>
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">
                Submit Ticket
            </button>
        </div>
    </form>
</div>
@endsection