@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Tableau de bord</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.options') }}">Gestion des options</a></li>
                <li class="breadcrumb-item active" aria-current="page">Option #{{ $option->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-tags me-2 text-option"></i>Option #{{ $option->id }}
                                    @if($option->code)
                                        <span class="badge bg-option fs-6 ms-2">Code: {{ $option->code }}</span>
                                    @endif
                                </h1>
                                <p class="text-muted mb-0">
                                    Créée le {{ $option->created_at->format('d/m/Y à H:i') }}
                                    @if($option->updated_at->ne($option->created_at))
                                        • Modifiée le {{ $option->updated_at->format('d/m/Y à H:i') }}
                                    @endif
                                </p>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="{{ route('admin.options') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-2"></i>Retour à la liste
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- Informations générales -->
            <div class="col-md-6">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>Informations générales
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Token</label>
                            <div class="form-control-plaintext">{{ $option->token }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">État</label>
                            <div>
                                <span class="badge {{ $option->state->bgColor() }} fs-6">
                                    <i class="fas {{ $option->state->icon() }} me-1"></i>
                                    {{ $option->state->label() }}
                                </span>
                                <p class="text-muted mt-2 mb-0">{{ $option->state->description() }}</p>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Date de fin</label>
                            <div class="form-control-plaintext">
                                @if($option->date_end)
                                    {{ $option->date_end->format('d/m/Y à H:i') }}
                                @else
                                    <span class="text-muted">Non définie</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Application et paramètres -->
            <div class="col-md-6">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-cog me-2"></i>Application et paramètres
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Application</label>
                            <div>
                                @if($option->application)
                                    <a href="{{ route('admin.applications.show', $option->application) }}" class="text-decoration-none">
                                        <span class="badge bg-primary fs-6">{{ $option->application->name }}</span>
                                    </a>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Paramètres de vente</label>
                            <div class="form-control-plaintext">
                                @if($option->saleParameter)
                                    <div>
                                        <span class="badge bg-secondary">Durée: {{ $option->saleParameter->option_duration_day }} jour(s)</span>
                                        <span class="badge bg-secondary">Rang: {{ $option->saleParameter->option_rang }}</span>
                                        @if($option->saleParameter->option_renouvellable)
                                            <span class="badge bg-success">Renouvelable</span>
                                        @endif
                                    </div>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Lot -->
            <div class="col-md-6">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-warning text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-building me-2"></i>Lot
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($option->product)
                            <div class="mb-3">
                                <label class="form-label fw-bold">Référence</label>
                                <div>
                                    @if($option->product->program)
                                        <a href="{{ route('partner.lot.show', ['application' => $option->application, 'program' => $option->product->program, 'lot' => $option->product]) }}" class="text-decoration-none">
                                            {{ $option->product->name }}
                                        </a>
                                    @else
                                        {{ $option->product->name }}
                                    @endif
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Programme</label>
                                <div>
                                    @if($option->product->program)
                                        <a href="{{ route('partner.program.show', ['application' => $option->application, 'program' => $option->product->program]) }}" class="text-decoration-none">
                                            {{ $option->product->program->name }}
                                        </a>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </div>
                            </div>
                        @else
                            <p class="text-muted">Aucun lot associé</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Client -->
            <div class="col-md-6">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-user me-2"></i>Client
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($option->client)
                            <div class="mb-3">
                                <label class="form-label fw-bold">Nom complet</label>
                                <div>
                                    <a href="{{ route('partner.clients.show', ['application' => $option->application, 'client' => $option->client]) }}" class="text-decoration-none">
                                        {{ $option->client->fullName() }}
                                    </a>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Email</label>
                                <div>{{ $option->client->email ?? '-' }}</div>
                            </div>
                            @if($option->user)
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Utilisateur associé</label>
                                    <div>
                                        <a href="{{ route('admin.users.show', $option->user) }}" class="text-decoration-none">
                                            {{ $option->user->fullName() }}
                                        </a>
                                    </div>
                                </div>
                            @endif
                        @else
                            <p class="text-muted">Aucun client associé</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection