@extends('layouts.app-shell')
@section('title', 'Edit service')
@section('sidebar')
    @include('admin._sidebar')
@endsection

@section('content')
<form method="POST" action="{{ route('admin.services.update', $service) }}" enctype="multipart/form-data">
    @csrf @method('PUT')
    <div class="panel">
        <div class="flex-between mb-3">
            <div>
                <a href="{{ route('admin.services.index') }}" class="btn btn-ghost btn-sm">← All services</a>
                <h2 style="font-size: 22px; font-weight: 700; margin-top: 8px;">Edit service</h2>
                <p class="muted" style="font-size: 13px; margin-top: 4px;">{{ $service->name }} · ID #{{ $service->id }}</p>
            </div>
            <div style="display:flex; gap:8px;">
                <form method="POST" action="{{ route('admin.services.destroy', $service) }}" onsubmit="return confirm('Delete this service?');" style="display:inline">
                    @csrf @method('DELETE')
                    <button class="btn btn-outline" style="border-color: var(--bfk-red); color: var(--bfk-red);"><x-icon name="trash" :size="14" /> Delete</button>
                </form>
                <button class="btn btn-primary"><x-icon name="check" :size="14" /> Save changes</button>
            </div>
        </div>
        @if($errors->any())
            <div class="alert alert-error">
                <strong>Please fix the following:</strong>
                <ul style="margin: 6px 0 0 16px;">
                    @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
                </ul>
            </div>
        @endif

        <div class="form-section">
            <div class="ic"><x-icon name="info" :size="14" /></div>
            <h4>Basic information</h4>
            <span class="sub">Shown to customers</span>
        </div>
        <div class="form-grid">
            <div class="field">
                <label>Service name <span class="req">*</span></label>
                <input name="name" value="{{ old('name', $service->name) }}" required>
            </div>
            <div class="field">
                <label>Slug</label>
                <input name="slug" value="{{ old('slug', $service->slug) }}">
                <span class="hint">Used in the URL. Lowercase letters, numbers and dashes only.</span>
            </div>
            <div class="field full">
                <label>Tagline</label>
                <input name="tagline" value="{{ old('tagline', $service->tagline) }}">
            </div>
            <div class="field full">
                <label>Description</label>
                <textarea name="description" rows="4">{{ old('description', $service->description) }}</textarea>
            </div>
            <div class="field">
                <label>Category</label>
                <select name="category_id">
                    <option value="">— None —</option>
                    @foreach($categories as $c)<option value="{{ $c->id }}" @selected(old('category_id', $service->category_id)==$c->id)>{{ $c->name }}</option>@endforeach
                </select>
            </div>
            <div class="field">
                <label>Sort order</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', $service->sort_order) }}">
                <span class="hint">Lower numbers appear first.</span>
            </div>
        </div>

        <div class="form-section">
            <div class="ic"><x-icon name="money" :size="14" /></div>
            <h4>Pricing & duration</h4>
            <span class="sub">Per-visit charges and time</span>
        </div>
        <div class="form-grid">
            <div class="field">
                <label>Price (₹) <span class="req">*</span></label>
                <input type="number" name="price_paise" value="{{ old('price_paise', $service->price_paise) }}" required>
            </div>
            <div class="field">
                <label>Original price (₹)</label>
                <input type="number" name="original_price_paise" value="{{ old('original_price_paise', $service->original_price_paise) }}">
                <span class="hint">Strikethrough price. Leave blank if no discount.</span>
            </div>
            <div class="field">
                <label>Duration (min) <span class="req">*</span></label>
                <input type="number" name="duration_minutes" value="{{ old('duration_minutes', $service->duration_minutes) }}" required>
                <span class="hint">How long each visit takes.</span>
            </div>
        </div>

        <div class="form-section">
            <div class="ic"><x-icon name="camera" :size="14" /></div>
            <h4>Image</h4>
            <span class="sub">Used on the customer booking page</span>
        </div>
        <div class="form-grid">
            <div class="field">
                <label>Upload new image</label>
                <input type="file" name="image" accept="image/*">
                <span class="hint">JPG, PNG or WebP, max 4 MB. Recommended 800×600.</span>
            </div>
            @if($service->image)
            <div class="field">
                <label>Current image</label>
                <div style="display:flex; align-items:center; gap:12px;">
                    <div style="width:84px; height:64px; border-radius:10px; overflow:hidden; background: var(--bfk-bg-soft); border: 1px solid var(--bfk-border); display: grid; place-items: center;">
                        @php $img = $service->image; @endphp
                        @if(Str::startsWith($img, ['http://','https://','data:']))
                            <img src="{{ $img }}" style="width:100%;height:100%;object-fit:cover;">
                        @else
                            <img src="{{ asset($img) }}" style="width:100%;height:100%;object-fit:cover;" onerror="this.parentNode.innerHTML='🛠️'">
                        @endif
                    </div>
                    <div style="font-size:12px; color: var(--bfk-text-3); word-break: break-all;">{{ $service->image }}</div>
                </div>
            </div>
            @endif
        </div>

        <div class="form-section">
            <div class="ic"><x-icon name="check" :size="14" /></div>
            <h4>What’s included</h4>
            <span class="sub">One item per line</span>
        </div>
        <div class="field full">
            <textarea name="whats_included" rows="5">{{ old('whats_included', is_array($service->whats_included) ? implode("\n", $service->whats_included) : '') }}</textarea>
        </div>

        <div class="form-section">
            <div class="ic"><x-icon name="settings" :size="14" /></div>
            <h4>Visibility</h4>
            <span class="sub">Featured and active flags</span>
        </div>
        <div class="form-grid">
            <div class="field">
                <label class="pill-toggle">
                    <input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $service->is_featured))>
                    <span class="sw"></span>
                    <span class="lbl">Featured service</span>
                </label>
                <span class="hint">Show in the customer home highlights.</span>
            </div>
            <div class="field">
                <label class="pill-toggle">
                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $service->is_active))>
                    <span class="sw"></span>
                    <span class="lbl">Active</span>
                </label>
                <span class="hint">Customers can subscribe to active services.</span>
            </div>
        </div>

        <div class="flex" style="gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--bfk-border-2);">
            <button class="btn btn-primary"><x-icon name="check" :size="14" /> Save changes</button>
            <a href="{{ route('admin.services.index') }}" class="btn btn-outline">Cancel</a>
        </div>
    </div>
</form>
@endsection