@extends('layouts.client')

@section('header_title', 'Novo Pedido')
@section('header_subtitle', 'Descreva o problema para a equipa técnica acompanhar.')

@section('content')
    <div class="mb-6">
        <a href="{{ route('client.tickets.index') }}" class="text-sm font-medium text-slate-400 hover:text-white transition-colors">Voltar aos tickets</a>
    </div>

    <div class="bg-slate-900 border border-white/5 rounded-2xl p-6 md:p-8 shadow-xl max-w-4xl">
        @if ($errors->any())
            <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
                <ul class="list-disc list-inside">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
            </div>
        @endif

        <form action="{{ route('client.tickets.store') }}" method="POST" class="space-y-6">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Instalação</label>
                    <select name="installation_id" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                        <option value="">Pedido geral</option>
                        @foreach($installations as $id => $address)
                            <option value="{{ $id }}" @selected(old('installation_id') == $id)>{{ $address }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Prioridade *</label>
                    <select name="priority" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                        <option value="low" @selected(old('priority') === 'low')>Baixa</option>
                        <option value="medium" @selected(old('priority', 'medium') === 'medium')>Média</option>
                        <option value="high" @selected(old('priority') === 'high')>Alta</option>
                        <option value="urgent" @selected(old('priority') === 'urgent')>Urgente</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Assunto *</label>
                    <input name="subject" value="{{ old('subject') }}" required class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Descrição *</label>
                    <textarea name="description" rows="5" required class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">{{ old('description') }}</textarea>
                </div>
            </div>
            <div class="pt-6 border-t border-white/5 flex justify-end gap-4">
                <a href="{{ route('client.tickets.index') }}" class="px-5 py-2.5 text-sm font-medium text-slate-300 hover:text-white transition-colors">Cancelar</a>
                <button type="submit" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-xl">Abrir Pedido</button>
            </div>
        </form>
    </div>
@endsection