@extends('layouts.dashboard')

@section('title', 'Devis - ' . $devi->nom)

@section('content')
<div class="mb-6">
    <a href="{{ route('dashboard.devis.index') }}" class="text-amber-600 hover:text-amber-700 font-medium flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Retour aux devis
    </a>
</div>

<div class="max-w-6xl space-y-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Card Demande de devis --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                <h1 class="text-xl font-bold text-slate-800">Demande de devis</h1>
                <p class="text-sm text-slate-500 mt-0.5">Détails de la demande</p>
            </div>
            <div class="p-6">
                <dl class="space-y-4">
                    <div>
                        <dt class="text-sm font-medium text-slate-500">Nom</dt>
                        <dd class="text-slate-800 font-medium">{{ $devi->nom }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-slate-500">Email</dt>
                        <dd class="text-slate-800"><a href="mailto:{{ $devi->email }}" class="text-amber-600 hover:text-amber-700">{{ $devi->email }}</a></dd>
                    </div>
                    @if($devi->telephone)
                    <div>
                        <dt class="text-sm font-medium text-slate-500">Téléphone</dt>
                        <dd class="text-slate-800"><a href="tel:{{ $devi->telephone }}" class="text-amber-600 hover:text-amber-700">{{ $devi->telephone }}</a></dd>
                    </div>
                    @endif
                    @if($devi->entreprise)
                    <div>
                        <dt class="text-sm font-medium text-slate-500">Entreprise</dt>
                        <dd class="text-slate-800">{{ $devi->entreprise }}</dd>
                    </div>
                    @endif
                    @if($devi->type_prestation)
                    <div>
                        <dt class="text-sm font-medium text-slate-500">Type de prestation</dt>
                        <dd class="text-slate-800">{{ $devi->type_prestation }}</dd>
                    </div>
                    @endif
                    <div>
                        <dt class="text-sm font-medium text-slate-500">Description</dt>
                        <dd class="text-slate-800 whitespace-pre-wrap">{{ $devi->description }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-slate-500">Date de la demande</dt>
                        <dd class="text-slate-800">{{ $devi->created_at->format('d/m/Y à H:i') }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        {{-- Card Mettre à jour le statut --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                <h2 class="text-xl font-bold text-slate-800">Statut du devis</h2>
                <p class="text-sm text-slate-500 mt-0.5">Mettre à jour et suivre</p>
            </div>
            <div class="p-6">
                <form action="{{ route('dashboard.devis.update', $devi) }}" method="POST" class="space-y-5">
                    @csrf
                    @method('PUT')
                    <div>
                        <label for="statut" class="block text-sm font-semibold text-slate-700 mb-2">Statut actuel</label>
                        <select name="statut" id="statut" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50/50 focus:bg-white focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
                            <option value="en_attente" {{ $devi->statut === 'en_attente' ? 'selected' : '' }}>En attente</option>
                            <option value="en_cours" {{ $devi->statut === 'en_cours' ? 'selected' : '' }}>En cours</option>
                            <option value="accepte" {{ $devi->statut === 'accepte' ? 'selected' : '' }}>Accepté</option>
                            <option value="refuse" {{ $devi->statut === 'refuse' ? 'selected' : '' }}>Refusé</option>
                        </select>
                    </div>
                    <div>
                        <label for="notes_admin" class="block text-sm font-semibold text-slate-700 mb-2">Notes internes</label>
                        <textarea name="notes_admin" id="notes_admin" rows="4" placeholder="Notes pour le suivi interne..." class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50/50 focus:bg-white focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition placeholder:text-slate-400 resize-none">{{ $devi->notes_admin }}</textarea>
                    </div>
                    <button type="submit" class="w-full flex items-center justify-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-6 py-3.5 rounded-xl font-semibold shadow-lg shadow-amber-500/25 transition">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        Mettre à jour le statut
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
        <form action="{{ route('dashboard.devis.destroy', $devi) }}" method="POST" onsubmit="return confirm('Supprimer cette demande de devis ?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="text-red-600 hover:text-red-700 font-medium">Supprimer la demande</button>
        </form>
    </div>
</div>
@endsection
