@extends('layouts.admin')

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

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

@section('content')
    <div class="row g-4">
        <div class="col-12">
            <div class="card data-card">
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.services.update', $service) }}" class="row g-3">
                        @csrf
                        @method('PUT')

                        <div class="col-md-6">
                            <label for="name" class="form-label">Name *</label>
                            <input id="name" name="name" type="text" value="{{ old('name', $service->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', $service->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', $service->status) === 'active')>Active</option>
                                <option value="inactive" @selected(old('status', $service->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', $service->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', $service->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') && empty($service->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', $service->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">Update Service</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card border-danger">
                <div class="card-body">
                    <h2 class="h6 text-danger">Danger Zone</h2>
                    <p class="text-muted mb-3">Deleting a service is permanent and cannot be undone.</p>
                    <form action="{{ route('admin.services.destroy', $service) }}" method="POST" onsubmit="return confirm('Delete this service?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete Service</button>
                    </form>
                </div>
            </div>
        </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