@extends('layouts.admin')

@section('title', 'Cartão Cliente — ' . $cardRequest->name)

@section('content')
<div class="relative z-10 w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
    <div class="pt-6 mb-8">
        <a href="{{ route('admin.card-requests.index') }}" class="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-brand transition mb-4">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg>
            Voltar
        </a>

        <header class="flex flex-col md:flex-row md:items-end justify-between gap-4">
            <div>
                <div class="flex items-center gap-3 mb-2">
                    <span class="w-8 h-[2px] bg-brand"></span>
                    <span class="font-bold text-[10px] uppercase tracking-[0.4em] text-brand">Pedido</span>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold italic tracking-tighter uppercase text-brand">{{ $cardRequest->name }}</h1>
                <p class="text-slate-500 font-medium mt-1">
                    @php
                        $colors = [
                            'pending' => 'bg-accent text-brand-900',
                            'contacted' => 'bg-blue-50 text-blue-600',
                            'collected' => 'bg-green-50 text-green-600',
                            'cancelled' => 'bg-slate-50 text-slate-400',
                        ];
                    @endphp
                    <span class="inline-block px-2.5 py-1 rounded-full text-[9px] font-bold uppercase tracking-wider {{ $colors[$cardRequest->status?->value ?? 'pending'] ?? 'bg-slate-100 text-slate-500' }}">
                        {{ $cardRequest->status?->label() ?? 'Fila de Espera' }}
                    </span>
                </p>
            </div>
        </header>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white border border-slate-100 rounded-2xl shadow-sm p-6">
                <h2 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">Informações do Cliente</h2>
                <dl class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <dt class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Nome</dt>
                        <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $cardRequest->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Telefone</dt>
                        <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $cardRequest->phone }}</dd>
                    </div>
                    <div>
                        <dt class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Loja de Tratamento</dt>
                        <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $cardRequest->store?->name ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Data do Pedido</dt>
                        <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $cardRequest->created_at->format('d/m/Y H:i') }}</dd>
                    </div>
                </dl>
            </div>

            @if ($cardRequest->admin_notes)
            <div class="bg-white border border-slate-100 rounded-2xl shadow-sm p-6">
                <h2 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">Notas</h2>
                <p class="text-sm text-slate-600 leading-relaxed whitespace-pre-wrap">{{ $cardRequest->admin_notes }}</p>
                @if ($cardRequest->replied_at)
                    <p class="mt-3 text-[10px] font-medium text-slate-400">Actualizado em {{ $cardRequest->replied_at->format('d/m/Y H:i') }}</p>
                @endif
            </div>
            @endif
        </div>

        <div class="lg:col-span-1">
            <div class="bg-white border border-slate-100 rounded-2xl shadow-sm p-6 sticky top-28">
                <h2 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">Actualizar Pedido</h2>

                <form method="POST" action="{{ route('admin.card-requests.update', $cardRequest) }}" class="space-y-4">
                    @csrf
                    @method('PUT')

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-1.5">Estado</label>
                        <select name="status" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('status') border-red-300 @enderror">
                            <option value="pending" {{ $cardRequest->status?->value === 'pending' ? 'selected' : '' }}>Fila de Espera</option>
                            <option value="contacted" {{ $cardRequest->status?->value === 'contacted' ? 'selected' : '' }}>Contactado</option>
                            <option value="collected" {{ $cardRequest->status?->value === 'collected' ? 'selected' : '' }}>Levantado</option>
                            <option value="cancelled" {{ $cardRequest->status?->value === 'cancelled' ? 'selected' : '' }}>Cancelado</option>
                        </select>
                        @error('status') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-1.5">Notas Internas</label>
                        <textarea name="admin_notes" rows="4" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('admin_notes') border-red-300 @enderror" placeholder="Adicionar nota sobre este pedido...">{{ old('admin_notes', $cardRequest->admin_notes) }}</textarea>
                        @error('admin_notes') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
                    </div>

                    <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-brand px-5 py-3 text-sm font-semibold text-white hover:bg-brand-700 hover:shadow-lg hover:shadow-brand/25 transition-all duration-200">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
                        Actualizar Pedido
                    </button>
                </form>

                <hr class="my-6 border-slate-100">

                <form method="POST" action="{{ route('admin.card-requests.destroy', $cardRequest) }}" onsubmit="return confirm('Tem a certeza que deseja remover este pedido?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-xl border-2 border-red-200 px-5 py-3 text-sm font-semibold text-red-500 hover:bg-red-50 transition-all duration-200">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
                        Remover Pedido
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection