@extends('layouts.dashboard')

@section('content')
@php
    $isEdit = isset($subService) && $subService;
    $action = $isEdit
        ? route('admin.sub-services.update', $subService->id)
        : route('admin.sub-services.store');
@endphp

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ $isEdit ? 'Edit Sub-Service' : 'New Sub-Service' }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.sub-services.index') }}">Sub-Services</a></li>
                    <li class="breadcrumb-item active">{{ $isEdit ? $subService->name : 'New' }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ $isEdit ? 'Edit sub-service' : 'Create sub-service' }}</h3>
            </div>
            <div class="card-body">
                <form method="POST"
                      action="{{ $action }}"
                      novalidate
                      class="form-styling register-form"
                      id="register_form">
                    @csrf
                    @if($isEdit) @method('PUT') @endif

                    <div class="form-row">
                        <div class="col-md-4 col-12">
                            <div class="form-group">
                                <label for="parent_slug">Parent Service <i>*</i></label>
                                <select name="parent_slug" id="parent_slug" class="form-control" required>
                                    <option value="">Select parent</option>
                                    @foreach($parents as $slug => $label)
                                        <option value="{{ $slug }}"
                                            {{ old('parent_slug', $isEdit ? $subService->parent_slug : '') === $slug ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('parent_slug')
                            <small class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </small>
                            @enderror
                        </div>

                        <div class="col-md-4 col-12">
                            <div class="form-group">
                                <label for="name">Service Name <i>*</i></label>
                                <small class="checkuser">(display title on the page)</small>
                                <input type="text"
                                       name="name"
                                       id="name"
                                       class="form-control longinput"
                                       value="{{ old('name', $isEdit ? $subService->name : '') }}"
                                       autocomplete="off"
                                       required>
                            </div>
                            @error('name')
                            <small class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </small>
                            @enderror
                        </div>

                        <div class="col-md-4 col-12">
                            <div class="form-group">
                                <label for="slug">Slug <i>*</i></label>
                                <small class="checkuser">(all-lower-case, hyphens only)</small>
                                <input type="text"
                                       name="slug"
                                       id="slug"
                                       class="form-control longinput"
                                       value="{{ old('slug', $isEdit ? $subService->slug : '') }}"
                                       autocomplete="off"
                                       required>
                            </div>
                            @error('slug')
                            <small class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </small>
                            @enderror
                        </div>

                        <div class="col-md-4 col-12">
                            <div class="form-group">
                                <label for="metatitle">Meta Title <i>*</i></label>
                                <small class="checkuser">(about 60 characters, including space)</small>
                                <input type="text"
                                       name="metatitle"
                                       id="metatitle"
                                       class="form-control longinput"
                                       value="{{ old('metatitle', $isEdit ? $subService->metatitle : '') }}"
                                       autocomplete="off">
                            </div>
                            @error('metatitle')
                            <small class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </small>
                            @enderror
                        </div>

                        <div class="col-md-4 col-12">
                            <div class="form-group">
                                <label for="keywords">Keywords</label>
                                <input type="text"
                                       name="keywords"
                                       id="keywords"
                                       class="form-control longinput"
                                       value="{{ old('keywords', $isEdit ? $subService->keywords : '') }}"
                                       autocomplete="off">
                            </div>
                            @error('keywords')
                            <small class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </small>
                            @enderror
                        </div>

                        <div class="col-md-2 col-12">
                            <div class="form-group">
                                <label for="sort_order">Sort Order</label>
                                <input type="number"
                                       name="sort_order"
                                       id="sort_order"
                                       class="form-control"
                                       value="{{ old('sort_order', $isEdit ? $subService->sort_order : 0) }}"
                                       min="0">
                            </div>
                        </div>

                        <div class="col-md-2 col-12">
                            <div class="form-group">
                                <label for="is_active">Status</label>
                                @php
                                    $activeValue = old('is_active', $isEdit ? ($subService->is_active ? 1 : 0) : 1);
                                @endphp
                                <select name="is_active" id="is_active" class="form-control">
                                    <option value="1" {{ (string) $activeValue === '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ (string) $activeValue === '0' ? 'selected' : '' }}>Draft</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12 col-12">
                            <div class="form-group">
                                <label for="metadescription">Meta Description <i>*</i></label>
                                <small class="checkuser">(150 - 160 characters long)</small>
                                <textarea name="metadescription"
                                          id="metadescription"
                                          class="form-control">{{ old('metadescription', $isEdit ? $subService->metadescription : '') }}</textarea>
                            </div>
                            @error('metadescription')
                            <small class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </small>
                            @enderror
                        </div>

                        <div class="col-md-12 col-12">
                            <div class="form-group">
                                <label for="short_description">Short Description</label>
                                <small class="checkuser">(hero paragraph, plain text)</small>
                                <textarea name="short_description"
                                          id="short_description"
                                          class="form-control"
                                          rows="3">{{ old('short_description', $isEdit ? $subService->short_description : '') }}</textarea>
                            </div>
                            @error('short_description')
                            <small class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </small>
                            @enderror
                        </div>

                        <div class="col-md-12 col-12">
                            <div class="form-group">
                                <label for="summernote">Page Body</label>
                                <small class="checkuser">(SEO friendly)</small>
                                <textarea class="form-control summernote"
                                          id="summernote"
                                          name="body"
                                          placeholder="Enter the page content">{{ old('body', $isEdit ? $subService->body : '') }}</textarea>
                            </div>
                            @error('body')
                            <small class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </small>
                            @enderror
                        </div>
                    </div>

                    @if($isEdit)
                    <div class="alert alert-light border mt-2 mb-0">
                        <strong>Live URL:</strong>
                        <a href="{{ url('/' . $subService->parent_slug . '/' . $subService->slug) }}" target="_blank" rel="noopener noreferrer">
                            {{ url('/' . $subService->parent_slug . '/' . $subService->slug) }}
                        </a>
                    </div>
                    @endif

                    <div class="center mt-3">
                        <button class="btn btn-primary" type="submit">
                            {{ $isEdit ? 'Update Sub-Service' : 'Create Sub-Service' }}
                        </button>
                        <a href="{{ route('admin.sub-services.index') }}" class="btn btn-default ml-2">Cancel</a>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <small>Update and manage sub-service pages for SEO Kenya. Ensure each page is well-optimized for SEO.</small>
            </div>
        </div>
    </div>
</section>
@endsection