@extends('layouts.admin')
@section('title', $package->exists ? 'Edit: '.$package->name : 'New Service')
@section('page-title', $package->exists ? 'Edit Service' : 'New Service')

@section('content')
<a href="{{ route('admin.services.index') }}" style="color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace;text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;">← BACK TO SERVICES</a>

@if($errors->any())
<div style="background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);border-radius:10px;padding:14px 18px;margin-bottom:20px;">
    <div style="font-size:10px;letter-spacing:2px;font-family:'JetBrains Mono',monospace;color:#f87171;margin-bottom:8px;">VALIDATION ERRORS</div>
    @foreach($errors->all() as $error)
    <div style="font-size:12px;color:#fca5a5;font-family:'JetBrains Mono',monospace;margin-top:4px;">· {{ $error }}</div>
    @endforeach
</div>
@endif

<form action="{{ $package->exists ? route('admin.services.update', $package) : route('admin.services.store') }}"
      method="POST"
      style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;">
    @csrf
    @if($package->exists) @method('PUT') @endif

    {{-- Main fields --}}
    <div style="display:flex;flex-direction:column;gap:16px;">

        <div class="glass-card" style="padding:24px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:20px;">BASIC INFO</div>

            <div style="display:grid;grid-template-columns:1fr 120px;gap:16px;margin-bottom:16px;">
                <div>
                    <label style="display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:7px;">Service Name *</label>
                    <input type="text" name="name" value="{{ old('name', $package->name) }}" required
                           style="width:100%;background:#080810;border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s;"
                           onfocus="this.style.borderColor='rgba(239,68,68,0.4)'" onblur="this.style.borderColor='var(--border)'"
                           placeholder="e.g. The Wrecking Ball">
                </div>
                <div>
                    <label style="display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:7px;">Tier #</label>
                    <input type="number" name="tier" value="{{ old('tier', $package->tier ?? 1) }}" min="1" required
                           style="width:100%;background:#080810;border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:14px;font-family:'JetBrains Mono',monospace;outline:none;transition:border-color 0.2s;"
                           onfocus="this.style.borderColor='rgba(239,68,68,0.4)'" onblur="this.style.borderColor='var(--border)'">
                </div>
            </div>

            <div style="margin-bottom:16px;">
                <label style="display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:7px;">Short Description * <span style="color:#475569;">(shown on cards, max 500 chars)</span></label>
                <input type="text" name="short_description" value="{{ old('short_description', $package->short_description) }}" required maxlength="500"
                       style="width:100%;background:#080810;border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s;"
                       onfocus="this.style.borderColor='rgba(239,68,68,0.4)'" onblur="this.style.borderColor='var(--border)'"
                       placeholder="One-line hook shown on the services card">
            </div>

            <div>
                <label style="display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:7px;">Full Description *</label>
                <textarea name="full_description" required rows="8"
                          style="width:100%;background:#080810;border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s;resize:vertical;line-height:1.6;"
                          onfocus="this.style.borderColor='rgba(239,68,68,0.4)'" onblur="this.style.borderColor='var(--border)'"
                          placeholder="Detailed description shown on the service detail page...">{{ old('full_description', $package->full_description) }}</textarea>
            </div>
        </div>
    </div>

    {{-- Sidebar options --}}
    <div style="display:flex;flex-direction:column;gap:16px;">

        <div class="glass-card" style="padding:20px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:16px;">PRICING</div>
            <label style="display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:7px;">Price (USD) *</label>
            <div style="position:relative;">
                <span style="position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#64748b;font-family:'JetBrains Mono',monospace;font-size:14px;">$</span>
                <input type="number" name="price" value="{{ old('price', $package->price ?? '0.00') }}" min="0" step="0.01" required
                       style="width:100%;background:#080810;border:1px solid var(--border);border-radius:10px;padding:11px 14px 11px 28px;color:#86efac;font-size:16px;font-family:'JetBrains Mono',monospace;font-weight:600;outline:none;transition:border-color 0.2s;"
                       onfocus="this.style.borderColor='rgba(239,68,68,0.4)'" onblur="this.style.borderColor='var(--border)'">
            </div>
            <div style="font-size:10px;color:#475569;font-family:'JetBrains Mono',monospace;margin-top:6px;">Set 0 for custom-priced services</div>
        </div>

        <div class="glass-card" style="padding:20px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:16px;">OPTIONS</div>

            <label style="display:flex;align-items:center;gap:12px;cursor:pointer;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#080810;margin-bottom:10px;transition:border-color 0.2s;"
                   onmouseover="this.style.borderColor='rgba(239,68,68,0.2)'" onmouseout="this.style.borderColor='var(--border)'">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $package->is_active ?? true) ? 'checked' : '' }}
                       style="width:16px;height:16px;accent-color:#ef4444;flex-shrink:0;">
                <div>
                    <div style="font-size:12px;font-weight:500;color:var(--text);">Active</div>
                    <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px;">Visible on the public services page</div>
                </div>
            </label>

            <label style="display:flex;align-items:center;gap:12px;cursor:pointer;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#080810;transition:border-color 0.2s;"
                   onmouseover="this.style.borderColor='rgba(99,102,241,0.2)'" onmouseout="this.style.borderColor='var(--border)'">
                <input type="hidden" name="is_custom" value="0">
                <input type="checkbox" name="is_custom" value="1" {{ old('is_custom', $package->is_custom ?? false) ? 'checked' : '' }}
                       style="width:16px;height:16px;accent-color:#6366f1;flex-shrink:0;">
                <div>
                    <div style="font-size:12px;font-weight:500;color:var(--text);">Custom Package</div>
                    <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px;">Routes to custom quote form instead of cart</div>
                </div>
            </label>
        </div>

        @if($package->exists)
        <div class="glass-card" style="padding:16px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:10px;">SLUG</div>
            <div class="mono" style="font-size:11px;color:#94a3b8;background:#080810;border:1px solid var(--border);border-radius:8px;padding:8px 12px;">{{ $package->slug }}</div>
            <div style="font-size:10px;color:#475569;font-family:'JetBrains Mono',monospace;margin-top:6px;">Auto-updated when name changes</div>
        </div>
        @endif

        <button type="submit"
                style="width:100%;background:linear-gradient(135deg,#ef4444,#b91c1c);border:none;border-radius:10px;padding:14px;color:white;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:3px;cursor:pointer;box-shadow:0 4px 16px rgba(239,68,68,0.25);transition:opacity 0.2s,transform 0.15s;"
                onmouseover="this.style.opacity='0.9';this.style.transform='translateY(-1px)'"
                onmouseout="this.style.opacity='1';this.style.transform='translateY(0)'">
            {{ $package->exists ? 'SAVE CHANGES →' : 'CREATE SERVICE →' }}
        </button>

        @if($package->exists)
        <form action="{{ route('admin.services.destroy', $package) }}" method="POST"
              onsubmit="return confirm('Delete {{ addslashes($package->name) }}? This cannot be undone.')">
            @csrf @method('DELETE')
            <button type="submit"
                    style="width:100%;background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.2);border-radius:10px;padding:10px;color:#f87171;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;cursor:pointer;transition:all 0.2s;"
                    onmouseover="this.style.background='rgba(239,68,68,0.14)'" onmouseout="this.style.background='rgba(239,68,68,0.06)'">
                DELETE SERVICE
            </button>
        </form>
        @endif
    </div>
</form>
@endsection
