@extends('layouts.admin')

@section('content')
<div class="page-wrapper">
    <div class="page-header">
        <div>
            <h1 class="page-title">
                {{ isset($service) ? 'Modifier le service' : 'Nouveau Service' }}
            </h1>
            <p class="page-subtitle">
                {{ isset($service) ? 'Mettez à jour les informations du service' : 'Ajoutez un nouveau service à votre catalogue' }}
            </p>
        </div>
        <a href="{{ route('services.index') }}" class="btn-back">Retour</a>
    </div>

    <div class="form-container">
        <form 
            action="{{ isset($service) ? route('services.update', $service) : route('services.store') }}" 
            method="POST" 
            enctype="multipart/form-data" 
            class="service-form"
        >
            @csrf
            @if(isset($service))
                @method('PUT')
            @endif

            <div class="form-group">
                <label class="form-label">Nom (clé de traduction)</label>
                <input type="text" name="name" value="{{ old('name', $service->name ?? '') }}" class="form-input" placeholder="ex: web_development" required>
                <small class="form-hint">Utilisé dans les fichiers lang : services.{{ old('name', $service->name ?? 'nom') }}</small>
            </div>

            <div class="form-group">
                <label class="form-label">Description (clé de traduction)</label>
                <input type="text" name="description" value="{{ old('description', $service->description ?? '') }}" class="form-input" placeholder="ex: web_development_desc" required>
                <small class="form-hint">Texte affiché sous le titre</small>
            </div>

            <div class="form-group">
                <label class="form-label">Icône Font Awesome</label>
                <input type="text" name="class_icon" value="{{ old('class_icon', $service->class_icon ?? 'fa-solid fa-laptop-code') }}" class="form-input" placeholder="ex: fa-solid fa-code" required>
                <small class="form-hint">
                    <a href="https://fontawesome.com/search?o=r&m=free" target="_blank" class="text-cyan-500 underline">Voir les icônes gratuites</a>
                </small>
            </div>

            <div class="form-group">
                <label class="form-label">Image du service (optionnel)</label>

                @if(isset($service) && $service->picture)
                    <div class="mb-4">
                        <p class="text-sm text-gray-600 mb-2">Image actuelle :</p>
                        <img src="{{ asset('storage/' . $service->picture) }}" alt="Image actuelle" class="w-48 rounded-lg shadow-md">
                    </div>
                @endif

                <input type="file" name="picture" accept="image/*" class="form-file">
                <small class="form-hint">
                    {{ isset($service) ? 'Laisser vide pour conserver l’image actuelle' : 'JPG, PNG, WebP, SVG — Max 2 Mo' }}
                </small>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-primary">
                    {{ isset($service) ? 'Mettre à jour' : 'Créer le service' }}
                </button>
                <a href="{{ route('services.index') }}" class="btn-secondary">Annuler</a>
            </div>
        </form>
    </div>
</div>

<style>
    :root {
        --primary: #00d4ff;
        --primary-dark: #00a3cc;
        --card: white;
        --text-muted: #94a3b8;
        --border: rgba(100, 100, 255, 0.2);
        --glow: 0 0 30px rgba(0, 212, 255, 0.4);
    }

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    min-height: 100vh;
    padding: 30px 20px 32px 300px;
    background-attachment: fixed;
  }

    .page-wrapper {
        max-width: 1000px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
        min-height: calc(100vh - 80px);
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3rem;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .page-title {
        font-size: 2.8rem;
        font-weight: 800;
        background: linear-gradient(90deg, #00d4ff, #0099cc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -1px;
    }

    .page-subtitle { color: var(--text-muted); font-size: 1.1rem; margin-top: 0.5rem; }

    .btn-back {
        color: var(--text-muted);
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        border-radius: 12px;
        border: 1px solid rgba(100, 100, 255, 0.3);
        transition: all 0.3s ease;
    }

    .btn-back:hover {
        background: rgba(0, 212, 255, 0.1);
        color: var(--primary);
        border-color: var(--primary);
    }

    .form-container {
        background: var(--card);
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.08);
        overflow: hidden;
        border: 1px solid var(--border);
    }

    .service-form { padding: 2.5rem; }

    .form-group { margin-bottom: 1.75rem; }

    .form-label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #1f2937;
    }

    .form-input {
        width: 100%;
        padding: 1rem 1.2rem;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        font-size: 1rem;
        background: #fafafa;
        transition: all 0.3s ease;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.15);
        background: white;
    }

    .form-file { width: 100%; padding: 1rem 0; font-size: 1rem; }

    .form-hint {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.875rem;
        color: #64748b;
    }

    .form-actions {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: 16px;
        font-weight: 600;
        font-size: 1.05rem;
        cursor: pointer;
        transition: all 0.4s ease;
        box-shadow: var(--glow);
        min-width: 180px;
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 40px rgba(0, 212, 255, 0.3);
    }

    .btn-secondary {
        background: transparent;
        color: #64748b;
        border: 1px solid #e2e8f0;
        padding: 1rem 2rem;
        border-radius: 16px;
        font-weight: 600;
        font-size: 1.05rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        min-width: 180px;
    }

    .btn-secondary:hover {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #1f2937;
    }

    @media (max-width: 768px) {
        .page-wrapper { padding: 1.5rem 1rem; }
        .page-header { flex-direction: column; align-items: stretch; text-align: center; }
        .page-title { font-size: 2.4rem; }
        .form-actions { flex-direction: column; }
        .btn-primary, .btn-secondary { width: 100%; }
    }
</style>
@include('components.alerts')
@endsection