@extends('layouts.admin')

@section('title', 'Create Service')
@section('page_heading', 'Create Service')

@section('page_actions')
    <a href="{{ route('admin.services.index') }}" class="btn btn-outline-secondary">Back to Services</a>
@endsection

@section('content')
    <div class="card data-card">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.services.store') }}" class="row g-3">
                @csrf

                <div class="col-md-6">
                    <label for="name" class="form-label">Name *</label>
                    <input id="name" name="name" type="text" value="{{ old('name') }}" required class="form-control">
                </div>

                

                <div class="col-md-6">
                    <label for="category_id" class="form-label">Category</label>
                    <select id="category_id" name="category_id" class="form-select">
                        <option value="">- None -</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected(old('category_id') == $category->id)>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-6">
                    <label for="status" class="form-label">Status *</label>
                    <select id="status" name="status" class="form-select">
                        <option value="active" @selected(old('status', 'active') === 'active')>Active</option>
                        <option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
                    </select>
                </div>

                <div class="col-12">
                    <label for="description" class="form-label">Description</label>
                    <textarea id="description" name="description" rows="5" class="form-control">{{ old('description') }}</textarea>
                </div>

                <div class="col-12">
                    <label class="form-label">Features</label>
                    <p class="small text-muted mb-2">One feature per line. Click "Add Feature" to add more.</p>
                    <div id="features-list" class="d-grid gap-2">
                        @foreach (old('features', []) as $feature)
                            <div class="input-group feature-row">
                                <input type="text" name="features[]" value="{{ $feature }}" placeholder="e.g. Unlimited revisions" class="form-control">
                                <button type="button" onclick="this.closest('.feature-row').remove()" class="btn btn-outline-danger">Remove</button>
                            </div>
                        @endforeach
                        @if (!old('features'))
                            <div class="input-group feature-row">
                                <input type="text" name="features[]" placeholder="e.g. Unlimited revisions" class="form-control">
                                <button type="button" onclick="this.closest('.feature-row').remove()" class="btn btn-outline-danger">Remove</button>
                            </div>
                        @endif
                    </div>
                    <button type="button" id="add-feature" class="btn btn-sm btn-outline-primary mt-2">Add Feature</button>
                </div>

                <div class="col-md-6">
                    <label for="starting_price" class="form-label">Starting Price</label>
                    <div class="input-group">
                        <span class="input-group-text">$</span>
                        <input id="starting_price" name="starting_price" type="number" step="0.01" min="0" value="{{ old('starting_price') }}" placeholder="0.00" class="form-control">
                    </div>
                </div>

                <div class="col-12 d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">Save Service</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('add-feature').addEventListener('click', function () {
            const row = document.createElement('div');
            row.className = 'input-group feature-row';
            row.innerHTML = '<input type="text" name="features[]" placeholder="e.g. Unlimited revisions" class="form-control">'
                          + '<button type="button" onclick="this.closest(\'.feature-row\').remove()" class="btn btn-outline-danger">Remove</button>';
            document.getElementById('features-list').appendChild(row);
        });
    </script>
@endpush