@extends('admin.layouts.app')
@section('title','Create Landing Page')
@section('content')
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('admin.landing-pages.index') }}" class="btn btn-light me-3"><i class="bi bi-arrow-left"></i></a>
    <h4 class="fw-bold mb-0">Create Landing Page</h4>
</div>
<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.landing-pages.store') }}">
            @csrf
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Page Name *</label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">URL Slug *</label>
                    <div class="input-group">
                        <span class="input-group-text">/</span>
                        <input type="text" name="slug" class="form-control" value="{{ old('slug') }}" required
                               pattern="[a-z0-9\-]+" placeholder="e.g. luxury-travel">
                    </div>
                    <div class="form-text">Lowercase letters, numbers, hyphens only.</div>
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Tagline</label>
                    <input type="text" name="tagline" class="form-control" value="{{ old('tagline') }}" placeholder="Short tagline for the page">
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Description</label>
                    <textarea name="description" class="form-control" rows="3">{{ old('description') }}</textarea>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Primary Color</label>
                    <input type="color" name="primary_color" class="form-control form-control-color w-100" value="{{ old('primary_color','#1a1a2e') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Secondary Color</label>
                    <input type="color" name="secondary_color" class="form-control form-control-color w-100" value="{{ old('secondary_color','#e94560') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Accent Color</label>
                    <input type="color" name="accent_color" class="form-control form-control-color w-100" value="{{ old('accent_color','#f5a623') }}">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary px-4">Create Page</button>
                    <a href="{{ route('admin.landing-pages.index') }}" class="btn btn-light ms-2">Cancel</a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
@push('scripts')
<script>
document.querySelector('[name=name]').addEventListener('input',function(){
    let slug = this.value.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'');
    document.querySelector('[name=slug]').value = slug;
});
</script>
@endpush