@extends('layouts.app')

@section('title', 'Ajouter un service')

@php
    $steps = [
        ['number' => '1', 'title' => 'Informations', 'text' => 'Titre, description et options', 'icon' => 'fa-circle-info', 'tone' => 'blue'],
        ['number' => '2', 'title' => 'Prix', 'text' => 'Tarifs et categorie', 'icon' => 'fa-tags', 'tone' => 'green'],
        ['number' => '3', 'title' => 'Photos', 'text' => 'Visuels et mises en avant', 'icon' => 'fa-camera', 'tone' => 'violet'],
        ['number' => '4', 'title' => 'Lieu', 'text' => 'Zone et adresse de service', 'icon' => 'fa-location-dot', 'tone' => 'orange'],
    ];

    $quickTips = [
        'Un titre clair convertit mieux.',
        'Mettez vos meilleurs visuels.',
        'Gardez un prix simple a lire.',
        'Precisez une vraie zone d intervention.',
    ];
@endphp

@section('content')
<div class="min-h-screen bg-linear-to-br from-blue-50 via-indigo-50 to-sky-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="service-create-shell space-y-3 sm:space-y-4">
            <div class="flex items-center justify-between gap-3">
                <a href="{{ route('prestataire.services.index') }}" class="service-create-back">
                    <i class="fas fa-arrow-left text-[11px]"></i>
                    Retour
                </a>
                <span class="service-create-chip">4 etapes</span>
            </div>

            <section class="service-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 un service</h1>
                    <p class="text-xs text-slate-600 sm:text-sm">Une entree courte pour publier votre service plus vite.</p>
                </div>
                <a href="{{ route('prestataire.services.create.step1') }}" class="service-create-primary">
                    <i class="fas fa-play text-[11px]"></i>
                    Commencer
                </a>
            </section>

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

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

            @if ($errors->any())
                <div class="service-create-notice service-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="service-create-progress">
                <div class="service-progress-line" aria-hidden="true"></div>
                @foreach($steps as $step)
                    <div class="service-progress-item {{ $loop->first ? 'is-active' : '' }}">
                        <span class="service-progress-dot">{{ $step['number'] }}</span>
                        <span class="service-progress-label">{{ $step['title'] }}</span>
                    </div>
                @endforeach
            </section>

            <section class="service-create-grid">
                @foreach($steps as $step)
                    <article class="service-step-card">
                        <div class="service-step-top">
                            <span class="service-step-badge">Etape {{ $step['number'] }}</span>
                            <div class="service-step-icon service-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>

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

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

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

    .service-create-back,
    .service-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);
    }

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

    .service-create-back:hover {
        background: #ffffff;
        color: #1d4ed8;
    }

    .service-create-chip {
        color: #1d4ed8;
        background: rgba(219, 234, 254, 0.92);
    }

    .service-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;
    }

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

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

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

    .service-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);
    }

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

    .service-create-notice-success {
        background: #eff6ff;
        color: #1d4ed8;
        border: 1px solid rgba(147, 197, 253, 0.95);
    }

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

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

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

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

    .service-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;
    }

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

    .service-progress-item.is-active .service-progress-dot {
        background: #2563eb;
        color: #fff;
    }

    .service-progress-item.is-active .service-progress-label {
        color: #1d4ed8;
    }

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

    .service-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);
    }

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

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

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

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

    .service-step-icon-green {
        background: #dcfce7;
        color: #16a34a;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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