@extends('layouts.app')

@section('title', 'Ajouter une annonce')

@php
    $steps = [
        ['number' => '1', 'title' => 'Informations', 'text' => 'Titre, prix et quantite', 'icon' => 'fa-circle-info', 'tone' => 'red'],
        ['number' => '2', 'title' => 'Localisation', 'text' => 'Zone de retrait ou de vente', 'icon' => 'fa-location-dot', 'tone' => 'blue'],
        ['number' => '3', 'title' => 'Photos', 'text' => 'Visuels de l article', 'icon' => 'fa-camera', 'tone' => 'violet'],
        ['number' => '4', 'title' => 'Details', 'text' => 'Categorie, etat et description', 'icon' => 'fa-list-check', 'tone' => 'orange'],
    ];

    $quickTips = [
        'Un titre simple vend plus vite.',
        'Mettez le bon prix des le debut.',
        'Montrez l etat reel en photo.',
        'Gardez votre stock coherent.',
    ];
@endphp

@section('content')
<div class="min-h-screen bg-linear-to-br from-rose-50 via-red-50 to-orange-100">
    <div class="mx-auto w-full max-w-4xl px-3 pb-6 pt-3 sm:px-4 sm:pb-8 sm:pt-4">
        <div class="urgent-create-shell space-y-3 sm:space-y-4">
            <div class="flex items-center justify-between gap-3">
                <a href="{{ route('prestataire.urgent-sales.index') }}" class="urgent-create-back">
                    <i class="fas fa-arrow-left text-[11px]"></i>
                    Retour
                </a>
                <span class="urgent-create-chip">4 etapes</span>
            </div>

            <section class="urgent-create-hero">
                <div class="min-w-0 space-y-1">
                    <h1 class="text-base font-semibold tracking-tight text-slate-950 sm:text-2xl">Ajouter une annonce</h1>
                    <p class="text-xs text-slate-600 sm:text-sm">Une entree courte pour publier une vente urgente sans perdre de place.</p>
                </div>
                <a href="{{ route('prestataire.urgent-sales.create.step1') }}" class="urgent-create-primary">
                    <i class="fas fa-play text-[11px]"></i>
                    Commencer
                </a>
            </section>

            <section class="urgent-create-tipbox">
                @foreach($quickTips as $tip)
                    <div class="urgent-create-tip">
                        <i class="fas fa-check-circle text-[11px] text-red-600"></i>
                        <span>{{ $tip }}</span>
                    </div>
                @endforeach
            </section>

            @if(session('urgent_sale_just_created'))
                <div class="urgent-create-notice urgent-create-notice-success">
                    <i class="fas fa-circle-info text-sm"></i>
                    <p>{{ session('info') ?? "Vous avez deja cree une annonce. Vous pouvez en ajouter une nouvelle ci-dessous." }}</p>
                </div>
            @endif

            @if ($errors->any())
                <div class="urgent-create-notice urgent-create-notice-danger" role="alert">
                    <i class="fas fa-triangle-exclamation text-sm"></i>
                    <div class="min-w-0">
                        <p class="font-semibold">Des informations sont a corriger.</p>
                        <ul class="mt-1 space-y-0.5 text-[11px] text-red-700 sm:text-xs">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <section class="urgent-create-progress">
                <div class="urgent-progress-line" aria-hidden="true"></div>
                @foreach($steps as $step)
                    <div class="urgent-progress-item {{ $loop->first ? 'is-active' : '' }}">
                        <span class="urgent-progress-dot">{{ $step['number'] }}</span>
                        <span class="urgent-progress-label">{{ $step['title'] }}</span>
                    </div>
                @endforeach
            </section>

            <section class="urgent-create-grid">
                @foreach($steps as $step)
                    <article class="urgent-step-card">
                        <div class="urgent-step-top">
                            <span class="urgent-step-badge">Etape {{ $step['number'] }}</span>
                            <div class="urgent-step-icon urgent-step-icon-{{ $step['tone'] }}">
                                <i class="fas {{ $step['icon'] }} text-xs"></i>
                            </div>
                        </div>
                        <div class="space-y-1">
                            <h2 class="text-sm font-semibold text-slate-900 sm:text-base">{{ $step['title'] }}</h2>
                            <p class="text-[11px] leading-5 text-slate-600 sm:text-xs">{{ $step['text'] }}</p>
                        </div>
                    </article>
                @endforeach
            </section>

            <section class="urgent-inventory-note">
                <div class="urgent-inventory-icon">
                    <i class="fas fa-store text-sm"></i>
                </div>
                <div class="min-w-0 space-y-1">
                    <p class="text-xs font-semibold text-green-900 sm:text-sm">Suivi inventaire automatique</p>
                    <p class="text-[11px] text-green-800 sm:text-xs">Le stock baisse quand une vente est confirmee, puis l annonce passe en vendu a zero.</p>
                </div>
                <a href="{{ route('prestataire.inventory.index') }}" class="urgent-inventory-link">
                    Inventaire
                </a>
            </section>

            <div class="flex justify-center pt-1">
                <a href="{{ route('prestataire.urgent-sales.create.step1') }}" class="urgent-create-primary">
                    <i class="fas fa-arrow-right text-[11px]"></i>
                    Commencer maintenant
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .urgent-create-shell {
        width: min(100%, 52rem);
        margin: 0 auto;
    }

    .urgent-create-back,
    .urgent-create-chip,
    .urgent-create-primary,
    .urgent-create-tip,
    .urgent-step-badge,
    .urgent-inventory-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        line-height: 1;
    }

    .urgent-create-back,
    .urgent-create-chip {
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.92);
        padding: 0.48rem 0.8rem;
        font-size: 0.72rem;
        font-weight: 700;
        color: #334155;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .urgent-create-back {
        transition: color 0.2s ease, background 0.2s ease;
    }

    .urgent-create-back:hover {
        background: #ffffff;
        color: #dc2626;
    }

    .urgent-create-chip {
        color: #b91c1c;
        background: rgba(254, 226, 226, 0.92);
    }

    .urgent-create-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        padding-bottom: 0.75rem;
    }

    .urgent-create-primary {
        border-radius: 0.9rem;
        background: #dc2626;
        padding: 0.68rem 1rem;
        font-size: 0.78rem;
        font-weight: 700;
        color: #fff;
        box-shadow: 0 8px 22px rgba(220, 38, 38, 0.18);
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .urgent-create-primary:hover {
        background: #b91c1c;
        transform: translateY(-1px);
    }

    .urgent-create-tipbox {
        display: grid;
        gap: 0.4rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urgent-create-tip {
        justify-content: flex-start;
        min-width: 0;
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.88);
        padding: 0.68rem 0.8rem;
        font-size: 0.73rem;
        font-weight: 600;
        color: #334155;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }

    .urgent-create-notice {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        border-radius: 1rem;
        padding: 0.85rem 0.95rem;
        font-size: 0.8rem;
    }

    .urgent-create-notice-success {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid rgba(252, 165, 165, 0.9);
    }

    .urgent-create-notice-danger {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid rgba(252, 165, 165, 0.9);
    }

    .urgent-create-progress {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.55rem;
        padding: 0.15rem 0;
    }

    .urgent-progress-line {
        position: absolute;
        left: 1.15rem;
        right: 1.15rem;
        top: 1rem;
        height: 1px;
        background: rgba(203, 213, 225, 0.95);
        z-index: 0;
    }

    .urgent-progress-item {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.42rem;
        text-align: center;
    }

    .urgent-progress-dot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background: #e2e8f0;
        font-size: 0.74rem;
        font-weight: 800;
        color: #475569;
    }

    .urgent-progress-label {
        font-size: 0.68rem;
        font-weight: 700;
        color: #64748b;
    }

    .urgent-progress-item.is-active .urgent-progress-dot {
        background: #dc2626;
        color: #fff;
    }

    .urgent-progress-item.is-active .urgent-progress-label {
        color: #b91c1c;
    }

    .urgent-create-grid {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urgent-step-card {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.7rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.92);
        padding: 0.85rem;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    }

    .urgent-step-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
    }

    .urgent-step-badge {
        border-radius: 9999px;
        background: #fef2f2;
        padding: 0.36rem 0.6rem;
        font-size: 0.62rem;
        font-weight: 800;
        color: #b91c1c;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .urgent-step-icon {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.8rem;
    }

    .urgent-step-icon-red {
        background: #fee2e2;
        color: #dc2626;
    }

    .urgent-step-icon-blue {
        background: #dbeafe;
        color: #2563eb;
    }

    .urgent-step-icon-violet {
        background: #ede9fe;
        color: #7c3aed;
    }

    .urgent-step-icon-orange {
        background: #ffedd5;
        color: #ea580c;
    }

    .urgent-inventory-note {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.75rem;
        border-radius: 1rem;
        background: #ecfdf5;
        border: 1px solid rgba(134, 239, 172, 0.95);
        padding: 0.8rem 0.9rem;
    }

    .urgent-inventory-icon {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.8rem;
        background: #dcfce7;
        color: #15803d;
    }

    .urgent-inventory-link {
        border-radius: 9999px;
        background: #16a34a;
        padding: 0.5rem 0.8rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: #fff;
        transition: background 0.2s ease;
    }

    .urgent-inventory-link:hover {
        background: #15803d;
    }

    @media (max-width: 639px) {
        .urgent-create-shell {
            width: min(100%, 24rem);
        }

        .urgent-create-back,
        .urgent-create-chip {
            padding: 0.42rem 0.68rem;
            font-size: 0.65rem;
        }

        .urgent-create-hero {
            gap: 0.7rem;
            padding-bottom: 0.6rem;
        }

        .urgent-create-primary {
            width: 100%;
            padding: 0.62rem 0.9rem;
            border-radius: 0.82rem;
            font-size: 0.72rem;
        }

        .urgent-create-tipbox,
        .urgent-create-grid {
            gap: 0.45rem;
        }

        .urgent-create-tipbox {
            grid-template-columns: 1fr;
        }

        .urgent-create-tip {
            padding: 0.56rem 0.72rem;
            border-radius: 0.82rem;
            font-size: 0.67rem;
        }

        .urgent-create-progress {
            gap: 0.35rem;
        }

        .urgent-progress-line {
            left: 0.85rem;
            right: 0.85rem;
            top: 0.86rem;
        }

        .urgent-progress-dot {
            width: 1.7rem;
            height: 1.7rem;
            font-size: 0.66rem;
        }

        .urgent-progress-label {
            font-size: 0.58rem;
        }

        .urgent-step-card {
            gap: 0.5rem;
            border-radius: 0.82rem;
            padding: 0.68rem;
        }

        .urgent-step-badge {
            padding: 0.3rem 0.48rem;
            font-size: 0.54rem;
        }

        .urgent-step-icon {
            width: 1.72rem;
            height: 1.72rem;
            border-radius: 0.66rem;
        }

        .urgent-inventory-note {
            grid-template-columns: 1fr;
            justify-items: start;
            padding: 0.72rem 0.76rem;
            border-radius: 0.82rem;
        }

        .urgent-inventory-icon {
            width: 1.72rem;
            height: 1.72rem;
            border-radius: 0.66rem;
        }

        .urgent-inventory-link {
            width: 100%;
            padding: 0.58rem 0.75rem;
            font-size: 0.68rem;
        }
    }

    @media (min-width: 1024px) {
        .urgent-create-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
</style>
@endpush