@extends('layouts.admin')
@section('title', 'Add Service')
@section('content')
<div class="admin-form-back">
    <a href="{{ route('admin.services.index') }}"><i class="bi bi-arrow-left"></i> Back to Services</a>
</div>
<div class="admin-form-wrap">
    <div class="form-head"><i class="bi bi-plus-circle me-2"></i>Add Service</div>
    <div class="form-body">
        <form action="{{ route('admin.services.store') }}" method="POST">
            @csrf
            <div class="form-section">
                <div class="mb-3">
                    <label class="form-label">Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" required placeholder="Service title">
                    @error('title')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
                <div class="mb-3">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="3" placeholder="Short description">{{ old('description') }}</textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Icon (Bootstrap icon class)</label>
                    <input type="text" name="icon" class="form-control" value="{{ old('icon') }}" placeholder="e.g. bi-briefcase">
                </div>
            </div>
            <div class="form-section">
                <div class="form-section-title">Button</div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Button text</label>
                        <input type="text" name="button_text" class="form-control" value="{{ old('button_text') }}" placeholder="e.g. Learn more">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Button URL</label>
                        <input type="text" name="button_url" class="form-control" value="{{ old('button_url') }}" placeholder="e.g. services.html">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Button style</label>
                    <select name="button_style" class="form-select">
                        <option value="primary" {{ old('button_style', 'primary') === 'primary' ? 'selected' : '' }}>Primary</option>
                        <option value="outline" {{ old('button_style') === 'outline' ? 'selected' : '' }}>Outline</option>
                    </select>
                </div>
            </div>
            <div class="form-section">
                <div class="form-section-title">Settings</div>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Sort order</label>
                        <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', 0) }}">
                    </div>
                    <div class="col-md-6 mb-3 d-flex align-items-end">
                        <div class="form-check">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1" class="form-check-input" id="ac" {{ old('is_active', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="ac">Active</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="admin-form-actions">
                <button type="submit" class="btn btn-submit"><i class="bi bi-check-lg me-1"></i> Create</button>
                <a href="{{ route('admin.services.index') }}" class="btn btn-cancel">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection