@extends('layouts.dashboard')

@section('content')
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0">Add Page</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item">
            <a href="{{ url('/dashboard') }}">Home</a>
          </li>
          <li class="breadcrumb-item active">New Page</li>
        </ol>
      </div>
    </div>
  </div>
</div>
@include('util.notify')
<section class="content">
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">Add new page: <small>(Create pages for your website)</small></h3>
    </div>
    <div class="card-body">
      <form method="POST" action="{{ route('pages.store') }}" novalidate class="form-styling register-form" id="register_form">
        @csrf
        <div class="form-row">
          <div class="col-md-4 col-12">
            <div class="form-group">
              <label for="name">Page Name <i>*</i></label>
              <small class="checkuser">(4 to 30 characters)</small>
              <input type="text" name="name" id="name" class="form-control longinput" value="{{ old('name') }}" autocomplete="off" />
            </div>
            @error('name')
            <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="type">Type <i>*</i></label>
              <select name="type" class="form-control">
                <option value="menu">Menu Page</option>
                <option value="attribute">Attribute Page</option>
                <option value="business">Business/Vendor Page</option>
                <option value="category">Category Page</option>
              </select>
            </div>
          </div>
          <div class="col-md-2 col-12">
            <div class="form-group">
              <label for="format">Format <i>*</i></label>
              <select name="format" class="form-control">
                <option value="service">Service Format</option>
                <option value="listicle">Listicle Format</option>
                <option value="article">Article Format</option>
                <option value="company">Company Format</option>
                <option value="info">Info Format</option>
                <option value="menu">Menu Category</option>

              </select>
            </div>
          </div>
          <div class="col-md-2 col-12">
            <div class="form-group">
              <label for="parent_id">Under Another Page? <i>*</i></label>
              <select name="parent_id" class="form-control">
                <option value="0">No</option>
                @foreach($pages as $page)
                <option value="{{ $page->id }}">{{ $page->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-2 col-12">
            <div class="form-group">
              <input type="hidden" name="website" value="{{ config('site.website') }}">
              <label class="text-muted small d-block mb-0">Site: {{ config('site.website') }}</label>
            </div>
          </div>

          <div class="col-md-4 col-12">
            <div class="form-group">
              <label for="metatitle">Meta Title <i>*</i></label>
              <small>(About 60 characters, including space)</small>
              <input type="text" name="metatitle" class="form-control longinput" value="{{ old('metatitle') }}" autocomplete="off" />
            </div>
            @error('metatitle')
            <small class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
            </small>
            @enderror
          </div>
          <div class="col-md-3 col-12">
            <div class="form-group">
              <label for="keywords">Keywords <i>*</i></label>
              <input type="text" name="keywords" id="keywords" class="form-control longinput" value="{{ old('keywords') }}" autocomplete="off" />
            </div>
            @error('keywords')
            <small class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
            </small>
            @enderror
          </div>
          <div class="col-md-3 col-12">
            <div class="form-group">
              <label for="slug">Slug <i>*</i></label>
              <small class="checkuser">(all-lower-case)</small>
              <input type="text" name="slug" id="slug" class="form-control longinput" value="{{ old('slug') }}" autocomplete="off" />
            </div>
            @error('slug')
            <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="author_id">Author <i>*</i></label>
              <select name="author_id" class="form-control">
                <option value="">Select Author</option>
                @foreach($authors as $author)
                  <option value="{{ $author->id }}" {{ old('author_id') == $author->id ? 'selected' : '' }}>
                    {{ $author->name }}
                  </option>
                @endforeach
              </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') }}</textarea>
            </div>
          </div>
          <div class="col-md-12 col-12">
            <div class="form-group">
              <label for="description">Description <i>*</i></label>
              <small class="checkuser">(SEO friendly)</small>
              <textarea class="form-control summernote" id="summernote" placeholder="Enter the Description" name="description">{{ old('description') }}</textarea>
            </div>
          </div>
          
        </div>
        <div class="center">
          <button class="btn btn-primary" type="submit">Create Page</button>
        </div>
      </form>
    </div>
    <div class="card-footer">
      <small>Create and manage different types of pages for your website. Ensure each page is well-optimized for SEO.</small>
    </div>
  </div>
</section>
@endsection