@extends('driver.layout')

@section('title','Create Support Ticket')

@section('content')

<div class="max-w-3xl mx-auto">

    {{-- HEADER --}}
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
            Create Support Ticket
        </h1>
        <p class="text-sm text-gray-500 dark:text-gray-400">
            Need help? Tell us what’s going on.
        </p>
    </div>

    {{-- CARD --}}
    <div class="bg-white dark:bg-slate-900
                border border-gray-200 dark:border-slate-700
                rounded-2xl shadow-sm p-6">

        {{-- ERRORS --}}
        @if ($errors->any())
            <div class="mb-4 rounded-xl bg-red-50 dark:bg-red-900/30 p-4 text-red-600">
                <ul class="list-disc list-inside text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST"
              action="{{ route('driver.support.store') }}"
              enctype="multipart/form-data"
              class="space-y-5">
            @csrf

            {{-- SUBJECT --}}
            <div>
                <label class="block text-sm font-medium mb-1">
                    Subject
                </label>
                <input type="text"
                       name="subject"
                       value="{{ old('subject') }}"
                       placeholder="Briefly describe the issue"
                       required
                       class="w-full rounded-xl border-gray-300 dark:border-slate-700
                              dark:bg-slate-800 dark:text-white
                              focus:ring-primary focus:border-primary">
            </div>

            {{-- PRIORITY --}}
            <div>
                <label class="block text-sm font-medium mb-2">
                    Priority
                </label>

                <div class="grid grid-cols-3 gap-3">

                    <label class="cursor-pointer">
                        <input type="radio" name="priority" value="low" class="peer hidden" checked>
                        <div class="peer-checked:border-primary peer-checked:bg-primary/10
                                    border rounded-xl p-4 text-center transition">
                            <i class="bi bi-info-circle text-gray-500 text-xl"></i>
                            <p class="mt-1 font-medium">Low</p>
                        </div>
                    </label>

                    <label class="cursor-pointer">
                        <input type="radio" name="priority" value="high" class="peer hidden">
                        <div class="peer-checked:border-yellow-500 peer-checked:bg-yellow-100
                                    border rounded-xl p-4 text-center transition">
                            <i class="bi bi-exclamation-circle text-yellow-500 text-xl"></i>
                            <p class="mt-1 font-medium">High</p>
                        </div>
                    </label>

                    <label class="cursor-pointer">
                        <input type="radio" name="priority" value="emergency" class="peer hidden">
                        <div class="peer-checked:border-red-500 peer-checked:bg-red-100
                                    border rounded-xl p-4 text-center transition">
                            <i class="bi bi-exclamation-triangle text-red-500 text-xl"></i>
                            <p class="mt-1 font-medium">Emergency</p>
                        </div>
                    </label>

                </div>
            </div>

            {{-- MESSAGE --}}
            <div>
                <label class="block text-sm font-medium mb-1">
                    Message
                </label>
                <textarea name="message"
                          rows="5"
                          placeholder="Explain the issue in detail"
                          required
                          class="w-full rounded-xl border-gray-300 dark:border-slate-700
                                 dark:bg-slate-800 dark:text-white
                                 focus:ring-primary focus:border-primary">{{ old('message') }}</textarea>
            </div>

            {{-- ATTACHMENT --}}
            <div>
                <label class="block text-sm font-medium mb-1">
                    Attachment (optional)
                </label>
                <input type="file"
                       name="attachment"
                       accept="image/*"
                       class="block w-full text-sm text-gray-600
                              file:mr-4 file:rounded-lg file:border-0
                              file:bg-primary/10 file:text-primary
                              hover:file:bg-primary/20">
            </div>

            {{-- ACTIONS --}}
            <div class="flex justify-end gap-3 pt-4">
                <a href="{{ route('driver.support.tickets') }}"
                   class="px-5 py-2 rounded-xl border
                          text-gray-600 hover:bg-gray-100
                          dark:text-gray-300 dark:hover:bg-slate-800">
                    Cancel
                </a>

                <button type="submit"
                        class="px-6 py-2 rounded-xl bg-primary
                               text-white hover:bg-primary/90 transition">
                    Submit Ticket
                </button>
            </div>

        </form>

    </div>

</div>

@endsection