@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ $homeUrl }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.webhooks.list') }}">Webhooks</a></li>
                <li class="breadcrumb-item active" aria-current="page">Webhook #{{ $webhook->id }}</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-3">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h1 class="h3 mb-2">
                                    <i class="fas fa-satellite-dish me-2 text-primary"></i>Webhook #{{ $webhook->id }}
                                </h1>
                                <p class="text-muted mb-0">
                                    Reçu le {{ $webhook->created_at->format('d/m/Y à H:i:s') }}
                                </p>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="{{ route('partner.webhooks.list') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-2"></i>Retour
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Details -->
        <div class="row g-4">
            <!-- Informations générales -->
            <div class="col-lg-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2 text-primary"></i>Informations générales
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-bold text-muted">Type</label>
                                <div>
                                    <span class="badge bg-info fs-6">{{ $webhook->type }}</span>
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold text-muted">Statut</label>
                                <div>
                                    @php
                                        $statusColors = [
                                            'CREATED' => 'primary',
                                            'IGNORED' => 'secondary',
                                            'DONE' => 'success',
                                            'MISSED' => 'warning',
                                        ];
                                        $color = $statusColors[$webhook->status->value] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $color }} fs-6">{{ $webhook->status->value }}</span>
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold text-muted">Date de création</label>
                                <div>
                                    {{ $webhook->created_at->format('d/m/Y H:i:s') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Body -->
            <div class="col-lg-8">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-code me-2 text-primary"></i>Contenu (Body)
                        </h5>
                    </div>
                    <div class="card-body">
                        <pre class="bg-light p-3 rounded" style="max-height: 600px; overflow-y: auto;"><code>{{ json_encode($webhook->body, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection