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

@section('content')
<form method="POST" action="{{ route('admin.services.store') }}" enctype="multipart/form-data">
    @csrf
    <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;">New service</h2>
                <p class="muted" style="font-size: 13px; margin-top: 4px;">Create a new service that customers can subscribe to.</p>
            </div>
            <div style="display:flex; gap:8px;">
                <a href="{{ route('admin.services.index') }}" class="btn btn-outline">Cancel</a>
                <button class="btn btn-primary"><x-icon name="check" :size="14" /> Create service</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

        {{-- Basic info --}}
        <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') }}" required placeholder="e.g. Premium Car Wash">
            </div>
            <div class="field">
                <label>Slug</label>
                <input name="slug" value="{{ old('slug') }}" placeholder="auto-generated if blank">
                <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') }}" placeholder="One-line pitch shown under the title">
            </div>
            <div class="field full">
                <label>Description</label>
                <textarea name="description" rows="4" placeholder="Detailed description shown on the service page…">{{ old('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')==$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', 0) }}">
                <span class="hint">Lower numbers appear first.</span>
            </div>
        </div>

        {{-- Pricing --}}
        <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') }}" required min="0" step="1" placeholder="0">
            </div>
            <div class="field">
                <label>Original price (₹)</label>
                <input type="number" name="original_price_paise" value="{{ old('original_price_paise') }}" placeholder="0">
                <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', 60) }}" required min="15" step="5">
                <span class="hint">How long each visit takes.</span>
            </div>
        </div>

        {{-- Media --}}
        <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="field">
            <input type="file" name="image" accept="image/*">
            <span class="hint">JPG, PNG or WebP, max 4 MB. Recommended 800×600.</span>
        </div>

        {{-- What's included --}}
        <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" placeholder="Exterior foam wash&#10;Tyre dressing&#10;Interior vacuum&#10;Dashboard polish">{{ old('whats_included') }}</textarea>
        </div>

        {{-- Status --}}
        <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'))>
                    <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', true))>
                    <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" /> Create service</button>
            <a href="{{ route('admin.services.index') }}" class="btn btn-outline">Cancel</a>
        </div>
    </div>
</form>
@endsection