@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Create Page')

@section('content')

    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold">Create Page</h1>
        <a href="{{ route('admin.page.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i> Back to Pages
        </a>
    </div>

    <div class="card">
        <form action="{{ route('admin.page.store') }}" method="POST">
            @csrf
            <input type="hidden" name="page_id" id="page_id">

            <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-8 lg:divide-x divide-border border-b border-border pb-10">
                <div class="col-span-2">
                    <!-- Basic Information -->
                    <div class="mb-10">
                        <h5 class="text-lg font-medium mb-4">Basic Information</h5>

                        <div class="mb-4 input-with-label">
                            <label>Title <span class="text-red-500">*</span></label>
                            <input type="text" name="name" id="Title" value="{{ old('title') }}"
                                class="@error('title') border-red-500 @enderror" 
                                placeholder="Enter Title" required>
                            @error('title')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <button type="button" class="btn btn-secondary" id="use-page-builder">
                                <i class="fas fa-edit mr-2"></i> Use Page Builder
                            </button>
                            <p class="text-xs text-gray-500 mt-2">Use our visual page builder to create custom layouts</p>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col col-span-full lg:col-span-1 lg:pl-8">
                    <!-- Publishing Options -->
                    <div class="mb-10">
                        <h3 class="mb-2">Publishing Options</h3>

                        <div class="mb-4 input-with-label">
                            <label>Status <span class="text-red-500">*</span></label>
                            <select name="status" class="form-select" required
                                class="@error('status') border-red-500 @enderror">
                                <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            @error('status')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-full flex-col sm:flex-row flex justify-end gap-4 mt-5">
                <a class="btn-secondary" href="{{ route('admin.page.index') }}">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary">Create Page</button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#use-page-builder').on('click', function() {
                let page_id = $('#page_id').val();
                let title = $('#Title').val();
                
                if (title == '') {
                    alert('Please enter a title');
                    return;
                }
                
                if (page_id == '') {
                    $.ajax({
                        url: "{{ route('admin.ajax.page.store') }}",
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            title: title
                        },
                        success: function(response) {
                            let id = response.page.id;
                            $('#page_id').val(id);
                            window.location.href = "{{ route('admin.page.content', '') }}" + '/' + id;
                        }
                    });
                } else {
                    window.location.href = "{{ route('admin.page.content', '') }}" + '/' + page_id;
                }
            });
        });
    </script>
@endpush