@extends('admin.layout')

@section('title', 'Edit Page')

@section('content')
<div class="pg-title">Edit Page: {{ $page->title }}</div>
<div class="pg-sub">Update page content and settings.</div>

@if($errors->any())
<div style="background:#f8d7da;border:1px solid rgba(220,53,69,.2);border-radius:12px;padding:14px 18px;margin-bottom:24px;">
  <div style="font-size:14px;color:#721c24;font-weight:600;margin-bottom:8px;">Please fix the following errors:</div>
  <ul style="margin:0;padding-left:20px;">
    @foreach($errors->all() as $error)
    <li style="font-size:13px;color:#721c24;margin-bottom:4px;">{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif

<form action="{{ route('admin.pages.update', $page->id) }}" method="POST">
  @csrf

  <div class="card" style="margin-bottom:20px;">
    <div class="card-head">
      <div class="card-title">Page Information</div>
    </div>
    <div class="card-body">
      <div style="margin-bottom:20px;">
        <label style="font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-soft);margin-bottom:8px;display:block;">Page Title</label>
        <input 
          type="text" 
          name="title" 
          value="{{ old('title', $page->title) }}"
          style="width:100%;padding:10px 14px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);outline:none;"
          required
        >
        <p style="font-size:11px;color:var(--text-soft);margin-top:6px;">The title that appears at the top of the page</p>
      </div>

      <div style="margin-bottom:20px;">
        <label style="font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-soft);margin-bottom:8px;display:block;">Page Slug (URL)</label>
        <div style="display:flex;align-items:center;gap:8px;">
          <span style="font-size:14px;color:var(--text-soft);">/page/</span>
          <input 
            type="text" 
            value="{{ $page->slug }}"
            style="flex:1;padding:10px 14px;font-family:'Courier New',monospace;font-size:14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-soft);color:var(--text-soft);outline:none;"
            disabled
          >
        </div>
        <p style="font-size:11px;color:var(--text-soft);margin-top:6px;">
          <svg style="width:12px;height:12px;display:inline-block;vertical-align:middle;margin-right:4px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
          Slug cannot be changed to maintain link integrity
        </p>
      </div>

      <div style="margin-bottom:20px;">
        <label style="display:flex;align-items:center;cursor:pointer;padding:12px;background:var(--bg-soft);border-radius:8px;border:1px solid var(--border);transition:all .2s;" onmouseover="this.style.background='var(--blue-faint)'" onmouseout="this.style.background='var(--bg-soft)'">
          <input 
            type="checkbox" 
            name="is_active" 
            value="1" 
            {{ $page->is_active ? 'checked' : '' }}
            style="width:18px;height:18px;margin-right:10px;cursor:pointer;"
          >
          <div>
            <div style="font-size:14px;font-weight:600;color:var(--text);">Page is Active</div>
            <div style="font-size:12px;color:var(--text-soft);margin-top:2px;">When checked, this page will be visible to all users</div>
          </div>
        </label>
      </div>
    </div>
  </div>

  <div class="card" style="margin-bottom:20px;">
    <div class="card-head">
      <div class="card-title">Page Content</div>
      <div style="font-size:12px;color:var(--text-soft);">HTML supported</div>
    </div>
    <div class="card-body">
      <textarea 
        name="content" 
        id="content-editor" 
        rows="20"
        style="width:100%;padding:14px;font-family:'Courier New',monospace;font-size:13px;line-height:1.6;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);outline:none;resize:vertical;"
        required
      >{{ old('content', $page->content) }}</textarea>
      
      <div style="margin-top:12px;padding:12px;background:var(--blue-faint);border-radius:8px;border:1px solid rgba(26,110,200,.2);">
        <div style="font-size:12px;font-weight:600;color:var(--blue);margin-bottom:6px;">Supported HTML Tags:</div>
        <div style="font-size:11px;color:var(--text-soft);line-height:1.6;">
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;h1&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;h2&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;h3&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;p&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;ul&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;ol&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;li&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;a&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;strong&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;em&gt;</code>
          <code style="background:rgba(26,110,200,.1);padding:2px 6px;border-radius:4px;margin-right:6px;">&lt;br&gt;</code>
        </div>
      </div>
    </div>
  </div>

  <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;">
    <a href="{{ route('admin.pages') }}" style="padding:12px 24px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:all .2s;" onmouseover="this.style.background='var(--bg-soft)'" onmouseout="this.style.background='transparent'">
      Cancel
    </a>
    <div style="display:flex;gap:12px;flex-wrap:wrap;">
      <a href="{{ route('page.show', $page->slug) }}" target="_blank" style="padding:12px 24px;border-radius:8px;border:1px solid var(--blue);background:transparent;color:var(--blue);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:all .2s;" onmouseover="this.style.background='var(--blue-faint)'" onmouseout="this.style.background='transparent'">
        <svg style="width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:6px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
        Preview Page
      </a>
      <button type="submit" style="padding:12px 32px;border-radius:8px;border:none;background:var(--blue);color:#fff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
        <svg style="width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:6px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        Save Changes
      </button>
    </div>
  </div>
</form>

<style>
#content-editor:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-faint);
}

@media (max-width: 640px) {
  form > div:last-child {
    flex-direction: column;
  }
  
  form > div:last-child > a,
  form > div:last-child > div {
    width: 100%;
  }
  
  form > div:last-child > div {
    flex-direction: column;
  }
  
  form > div:last-child button,
  form > div:last-child a {
    width: 100%;
    text-align: center;
  }
}
</style>
@endsection