@extends('admin.layouts.app')

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

@section('content')



<!-- ============================================
   HTML CONTENT
============================================ -->

<div class="page-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li><a href="{{ route('admin.dashboard') }}"><i class="bi bi-house-door"></i> Dashboard</a></li>
            <li><a href="{{ route('admin.pages.index') }}"><i class="bi bi-file-earmark-text"></i> Pages</a></li>
            <li class="active">Add Page</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Add New Page</h1>
            <p><i class="bi bi-plus-circle"></i> Create a new page for your website</p>
        </div>
        <a href="{{ route('admin.pages.index') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to Pages
        </a>
    </div>

    <!-- ===== FORM CARD ===== -->
    <div class="form-card">
        <form action="{{ route('admin.pages.store') }}"
              method="POST"
              enctype="multipart/form-data"
              id="pageForm">

            @csrf

            <!-- ===== INCLUDE FORM ===== -->
            @include('admin.pages.form')

            
        </form>
    </div>

</div>

<!-- ============================================
   SCRIPT
============================================ -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        console.log('✅ Add Page loaded successfully!');

        // ============================================
        // RESET BUTTON CONFIRMATION
        // ============================================
        document.querySelector('.btn-reset')?.addEventListener('click', function(e) {
            if (!confirm('Are you sure you want to reset the form?')) {
                e.preventDefault();
            }
        });

        // ============================================
        // FORM VALIDATION - Optional
        // ============================================
        const form = document.getElementById('pageForm');
        if (form) {
            form.addEventListener('submit', function(e) {
                const title = document.querySelector('input[name="title"]');
                if (title && !title.value.trim()) {
                    e.preventDefault();
                    title.classList.add('is-invalid');
                    alert('Please enter a page title.');
                    title.focus();
                }
            });

            // Remove error state on input
            document.querySelectorAll('.form-control-custom').forEach(function(input) {
                input.addEventListener('input', function() {
                    this.classList.remove('is-invalid');
                });
            });
        }
    });
</script>

@endsection