@extends('admin.layout')

@section('title', 'Paramètres E-commerce')
@section('header', 'Paramètres E-commerce')

@section('content')
<nav class="mb-6">
    <a href="{{ route('admin.ecommerce.index') }}" class="text-slate-500 hover:text-slate-900 text-sm">← E-commerce</a>
</nav>

@php
    $stripeOk = !empty($settings['stripe_key'] ?? '') && !empty($settings['stripe_secret'] ?? '');
    $laposteOk = !empty($settings['laposte_okapi_key'] ?? '');
    $colissimoOk = !empty($settings['colissimo_contract_number'] ?? '') && !empty($settings['colissimo_password'] ?? '');
    $chronopostOk = !empty($settings['chronopost_account_number'] ?? '') && !empty($settings['chronopost_password'] ?? '');
    $mondialOk = !empty($settings['mondial_relay_enseigne'] ?? '') && !empty($settings['mondial_relay_private_key'] ?? '');
@endphp

<div class="mb-8 p-4 bg-slate-50 rounded-2xl border border-slate-200">
    <h3 class="font-semibold text-slate-800 mb-3">État des connexions</h3>
    <div class="flex flex-wrap gap-3">
        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm {{ $stripeOk ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-white text-slate-600 border border-slate-200' }}">
            <img src="{{ asset('images/partners/stripe.svg') }}" alt="" class="w-5 h-5 object-contain">
            Stripe
            @if($stripeOk)<svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>@endif
        </span>
        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm {{ $laposteOk ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-white text-slate-600 border border-slate-200' }}">
            <img src="{{ asset('images/partners/laposte.svg') }}" alt="" class="w-5 h-5 object-contain">
            La Poste Suivi
            @if($laposteOk)<svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>@endif
        </span>
        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm {{ $colissimoOk ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-white text-slate-600 border border-slate-200' }}">
            <img src="{{ asset('images/partners/colissimo.svg') }}" alt="" class="w-5 h-5 object-contain">
            Colissimo
            @if($colissimoOk)<svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>@endif
        </span>
        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm {{ $chronopostOk ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-white text-slate-600 border border-slate-200' }}">
            <img src="{{ asset('images/partners/chronopost.svg') }}" alt="" class="w-5 h-5 object-contain">
            Chronopost
            @if($chronopostOk)<svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>@endif
        </span>
        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm {{ $mondialOk ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-white text-slate-600 border border-slate-200' }}">
            <img src="{{ asset('images/partners/mondial-relay.svg') }}" alt="" class="w-5 h-5 object-contain">
            Mondial Relay
            @if($mondialOk)<svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>@endif
        </span>
    </div>
</div>

<form method="POST" action="{{ route('admin.ecommerce.settings.store') }}" class="space-y-8 max-w-3xl">
    @csrf

    {{-- Stripe --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center p-2">
                    <img src="{{ asset('images/partners/stripe.svg') }}" alt="Stripe" class="w-full h-full object-contain">
                </div>
                <div>
                    <h2 class="font-semibold text-slate-800">Stripe</h2>
                    <p class="text-sm text-slate-500">Paiements en ligne sécurisés</p>
                </div>
            </div>
        </div>
        <div class="p-6 space-y-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Clé publique (publishable)</label>
                <input type="text" name="stripe_key" value="{{ old('stripe_key', $settings['stripe_key'] ?? '') }}" placeholder="pk_test_xxx ou pk_live_xxx" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono text-sm">
                <p class="text-xs text-slate-500 mt-1">Utilisée côté client pour Stripe.js</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Clé secrète (secret)</label>
                <input type="password" name="stripe_secret" value="{{ old('stripe_secret') }}" placeholder="{{ ($settings['stripe_secret'] ?? '') ? '•••••••• (laisser vide pour conserver)' : 'sk_test_xxx ou sk_live_xxx' }}" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono text-sm" autocomplete="new-password">
                @if($settings['stripe_secret'] ?? '')<p class="text-xs text-emerald-600 mt-1">✓ Clé configurée</p>@endif
                <p class="text-xs text-slate-500 mt-1">Ne jamais partager. Utilisée côté serveur.</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Webhook secret</label>
                <input type="password" name="stripe_webhook_secret" value="{{ old('stripe_webhook_secret') }}" placeholder="{{ ($settings['stripe_webhook_secret'] ?? '') ? '•••••••• (laisser vide pour conserver)' : 'whsec_xxx' }}" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono text-sm" autocomplete="new-password">
                @if($settings['stripe_webhook_secret'] ?? '')<p class="text-xs text-emerald-600 mt-1">✓ Webhook configuré</p>@endif
                <p class="text-xs text-slate-500 mt-1">Pour valider les webhooks Stripe. URL : <code class="bg-slate-100 px-1 rounded">{{ url('/boutique/stripe-webhook') }}</code></p>
            </div>
            <p class="text-sm text-slate-500">Obtenez vos clés sur <a href="https://dashboard.stripe.com/apikeys" target="_blank" class="text-primary-500 hover:underline">dashboard.stripe.com</a></p>
        </div>
    </div>

    {{-- La Poste / Suivi --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center p-2">
                    <img src="{{ asset('images/partners/laposte.svg') }}" alt="La Poste" class="w-full h-full object-contain">
                </div>
                <div>
                    <h2 class="font-semibold text-slate-800">La Poste – Suivi colis</h2>
                    <p class="text-sm text-slate-500">Suivi Colissimo, Chronopost, Lettre suivie</p>
                </div>
            </div>
        </div>
        <div class="p-6 space-y-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Clé API X-Okapi-Key</label>
                <input type="password" name="laposte_okapi_key" value="{{ old('laposte_okapi_key', $settings['laposte_okapi_key'] ?? '') }}" placeholder="Votre clé API" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono text-sm" autocomplete="new-password">
                <p class="text-xs text-slate-500 mt-1">Gratuit sur <a href="https://developer.laposte.fr/products/suivi/2" target="_blank" class="text-primary-500 hover:underline">developer.laposte.fr</a>. Permet le suivi des colis.</p>
            </div>
        </div>
    </div>

    {{-- Colissimo / So Colissimo --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center p-2">
                    <img src="{{ asset('images/partners/colissimo.svg') }}" alt="Colissimo" class="w-full h-full object-contain">
                </div>
                <div>
                    <h2 class="font-semibold text-slate-800">Colissimo – So Colissimo</h2>
                    <p class="text-sm text-slate-500">Création d’étiquettes, tarifs dynamiques</p>
                </div>
            </div>
        </div>
        <div class="p-6 space-y-4">
            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">N° de contrat</label>
                    <input type="text" name="colissimo_contract_number" value="{{ old('colissimo_contract_number', $settings['colissimo_contract_number'] ?? '') }}" placeholder="Ex: 123456" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Mot de passe</label>
                    <input type="password" name="colissimo_password" value="{{ old('colissimo_password', $settings['colissimo_password'] ?? '') }}" placeholder="••••••••" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500" autocomplete="new-password">
                </div>
            </div>
            <p class="text-sm text-slate-500">Contrat So Colissimo sur <a href="https://www.colissimo.entreprise.laposte.fr" target="_blank" class="text-primary-500 hover:underline">colissimo.entreprise.laposte.fr</a></p>
        </div>
    </div>

    {{-- Chronopost --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center p-2">
                    <img src="{{ asset('images/partners/chronopost.svg') }}" alt="Chronopost" class="w-full h-full object-contain">
                </div>
                <div>
                    <h2 class="font-semibold text-slate-800">Chronopost</h2>
                    <p class="text-sm text-slate-500">Livraison express, création d’étiquettes</p>
                </div>
            </div>
        </div>
        <div class="p-6 space-y-4">
            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">N° de compte</label>
                    <input type="text" name="chronopost_account_number" value="{{ old('chronopost_account_number', $settings['chronopost_account_number'] ?? '') }}" placeholder="Ex: 12345678" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Mot de passe</label>
                    <input type="password" name="chronopost_password" value="{{ old('chronopost_password', $settings['chronopost_password'] ?? '') }}" placeholder="••••••••" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500" autocomplete="new-password">
                </div>
            </div>
            <p class="text-sm text-slate-500">Contrat Chronopost Pro sur <a href="https://www.chronopost.fr" target="_blank" class="text-primary-500 hover:underline">chronopost.fr</a></p>
        </div>
    </div>

    {{-- Mondial Relay --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center p-2">
                    <img src="{{ asset('images/partners/mondial-relay.svg') }}" alt="Mondial Relay" class="w-full h-full object-contain">
                </div>
                <div>
                    <h2 class="font-semibold text-slate-800">Mondial Relay</h2>
                    <p class="text-sm text-slate-500">Points Relais, création d’expéditions</p>
                </div>
            </div>
        </div>
        <div class="p-6 space-y-4">
            <div class="grid md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Enseigne (Brand ID)</label>
                    <input type="text" name="mondial_relay_enseigne" value="{{ old('mondial_relay_enseigne', $settings['mondial_relay_enseigne'] ?? '') }}" placeholder="Ex: BDTEST13" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Clé privée</label>
                    <input type="password" name="mondial_relay_private_key" value="{{ old('mondial_relay_private_key', $settings['mondial_relay_private_key'] ?? '') }}" placeholder="••••••••" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500" autocomplete="new-password">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Mode test</label>
                    <label class="flex items-center gap-2 mt-2 cursor-pointer">
                        <input type="hidden" name="mondial_relay_test_mode" value="0">
                        <input type="checkbox" name="mondial_relay_test_mode" value="1" {{ old('mondial_relay_test_mode', $settings['mondial_relay_test_mode'] ?? false) ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
                        <span class="text-sm text-slate-600">Activer le mode test</span>
                    </label>
                </div>
            </div>
            <p class="text-sm text-slate-500">Contacter Mondial Relay pour obtenir vos identifiants API.</p>
        </div>
    </div>

    {{-- Général --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
            <h2 class="font-semibold text-slate-800">Général</h2>
            <p class="text-sm text-slate-500">Devise et options d'affichage</p>
        </div>
        <div class="p-6">
        <div class="space-y-6">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Devise</label>
                <select name="ecommerce_currency" class="w-full md:w-48 px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                    <option value="EUR" {{ old('ecommerce_currency', $settings['ecommerce_currency'] ?? 'EUR') === 'EUR' ? 'selected' : '' }}>€ EUR</option>
                    <option value="USD" {{ old('ecommerce_currency', $settings['ecommerce_currency'] ?? '') === 'USD' ? 'selected' : '' }}>$ USD</option>
                    <option value="CHF" {{ old('ecommerce_currency', $settings['ecommerce_currency'] ?? '') === 'CHF' ? 'selected' : '' }}>CHF</option>
                </select>
            </div>
            <div>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="hidden" name="ecommerce_navbar_submenu" value="0">
                    <input type="checkbox" name="ecommerce_navbar_submenu" value="1" {{ old('ecommerce_navbar_submenu', $settings['ecommerce_navbar_submenu'] ?? true) ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
                    <span class="text-sm font-medium text-slate-700">Afficher le sous-menu des catégories dans la navbar</span>
                </label>
                <p class="text-xs text-slate-500 mt-1">Quand le lien « Boutique » est dans le menu, afficher un dropdown avec les catégories au survol.</p>
            </div>
        </div>
        </div>
    </div>

    <div class="flex gap-3">
        <button type="submit" class="px-6 py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">Enregistrer les paramètres</button>
        <a href="{{ route('admin.ecommerce.index') }}" class="px-6 py-2.5 border border-slate-200 rounded-xl font-medium hover:bg-slate-50 transition text-slate-700">Annuler</a>
    </div>
</form>
@endsection
