@section('title', 'Edit Page '.$page['slug'])
<div class="card">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_user_register" aria-expanded="true" aria-controls="kt_user_register">
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">{{ __('Edit Page '.$page['slug']) }}</h3>
        </div>
    </div>

    <div class="card-body border-top p-9">
       @include('partials.alerts.main')
        <form method="POST" action="{{ route('page.update', $page['id']) }}" class="form w-100" id="kt_page_edit_form" novalidate="novalidate">
            @csrf

            {{-- <div class="row mb-6">
                <label class="col-lg-4 col-form-label text-dark fs-6 required">{{ __('Parent') }}</label>
                <div class="col-lg-8">
                    <select name="parent" id="parent" data-control="select2" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" aria-placeholder="Select Parent">
                        <option value="" selected>Select Parent</option>
                        @foreach ($pages??[] as $key => $value)
                            <option value="{{$key}}"
                            @if (isset($page['parent']['id']) && $page['parent']['id'] == $key)
                                selected
                            @endif
                            >{{$value}}</option>
                        @endforeach
                    </select>
                </div>
            </div> --}}

            <div class="row mb-6 ">
                <label class="col-lg-4 col-form-label text-dark fs-6 required">{{ __('Name') }}</label>

                <div class="col-lg-8">
                    <input type="text" name="name" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Page Name" value="{{ $page['name'] ?? '' }}"/>
                </div>
            </div>
            <div class="row mb-6 ">
                <label class="col-lg-4 col-form-label text-dark fs-6 required">{{ __('slug') }}</label>

                <div class="col-lg-8">
                    <input type="text" id="text_slug" name="slug" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Page Slug" value="{{ $page['slug'] ?? '' }}"/>
                    <div id="slugError" style="display: none; color: #F2477F;"></div>
                </div>
            </div>
            {{-- <div class="row mb-6">
                <label class="col-lg-4 col-form-label text-dark fs-6 required">{{ __('Start & End Date') }}</label>
                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-lg-5 fv-row">
                            <input type="datetime-local" name="start_date" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" value="{{ $page['start_date'] ?? '' }}" />
                        </div>
                        <div class="col-lg-5 fv-row">
                            <input type="datetime-local" name="end_date" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" value="{{ $page['end_date'] ?? '' }}" />
                        </div>
                    </div>
                </div>
            </div> --}}

            <div class="separator separator my-8"></div>

            <div class="row mb-6 ">
                <span class="col-lg-4 text-dark fw-bolder fs-3">Meta Section</span>
            </div>

            <div class="row mb-6 ">
                <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Robots') }}</label>

                <div class="col-lg-8 align-items-center d-flex">
                    <div class="form-check form-check-solid form-switch fv-row">
                        <input class="form-check-input" name="meta[robots]" value="1" {{ $page ['meta']['robots']  == 1 ? 'checked' :  ''}} type="checkbox"/>
                    </div>
                </div>
            </div>

            <div class="row mb-6 ">
                <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Title') }}</label>

                <div class="col-lg-8">
                    <input type="text" name="meta[title]" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Page Meta Title" value="{{ $page['meta']['title'] ?? '' }}"/>
                </div>
            </div>

            <div class="row mb-6 ">
                <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Description') }}</label>

                <div class="col-lg-8">
                    <textarea name="meta[description]" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" rows="5" placeholder="Page Meta Description">{{ $page['meta']['description'] ?? '' }}</textarea>
                </div>
            </div>
            <div class="row mb-6">
                <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Keywords') }}</label>

                <div class="col-lg-8">
                    <textarea name="meta[keywords]" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" rows="5" placeholder="Page Meta Keywords">{{ $page['meta']['keywords'] ?? '' }}</textarea>
                </div>
            </div>

        </form>
    </div>

    <div class="card-footer ">
        <div class="text-center">
            <button type="submit" form="kt_page_edit_form" class="btn btn-lg btn-primary">
                Submit
            </button>
        </div>
    </div>
</div>
<script>
    // document.addEventListener("DOMContentLoaded", function() {

    //     var slugInput = document.getElementById('text_slug');
    //     var slugError = document.getElementById('slugError');

    //     slugInput.addEventListener('keydown', function(event) {
    //         var value = this.value + event.key; // Ambil nilai input saat ini ditambah karakter baru

    //         if (event.key === ' ' || /\s/.test(value)) {
    //             slugError.textContent = 'Slug cannot contain spaces';
    //             slugError.style.display = 'block';
    //             event.preventDefault();
    //         } else {
    //             slugError.style.display = 'none';
    //         }
    //     });
    // });

    
    document.addEventListener("DOMContentLoaded", function() {
        var slugInput = document.getElementById('text_slug');
        var slugError = document.getElementById('slugError');

        slugInput.addEventListener('input', function() {
            if (this.value.includes(' ')) {
                slugError.textContent = 'Slug cannot contain spaces';
                slugError.style.display = 'block';
            } else {
                slugError.style.display = 'none';
            }
        });
    });
</script>