@extends('backend.layouts.app')
@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('superadmin.cms.index') }}">{{__('app.cms.title')}}</a>
        </li>
        <li class="active">{{$title}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
        
        
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0">
    @include('backend.layouts.alert')
      <!-- Default box -->
      <div class="row">
      <div class="col-md-12">

        <div class="border-top">
            
            <div class="" id="customer-step-1" >
              <form id="cms-form" class="form-horizontal form-validate" method="POST" enctype="multipart/form-data" action="{{ route('superadmin.cms.update', $cmsPage->id) }}">
                  @csrf
                  @method('PUT')
                  <input type="hidden" name="id" value="{{ old('id', $cmsPage->id ?? '') }}" id="scret_id">
                  
                      <div class="box-body px-0 form-box-scroll">
                      
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                                <label for="position" class="control-label">{{__('app.cms.page_name')}}</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="page_name" class="form-control" id="page_name" placeholder="Enter page name" value="{{ old('page_name', $cmsPage->page_name ?? '') }}">
                                    @if ($errors->has('page_name'))
                                    <span class="help-block text-danger">{{ $errors->first('page_name') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          
                          <div class="col-md-12">
                            <div class="form-group">
                                <label for="content" class="control-label">{{__('app.cms.content')}}</label>
                                <div class="col-field-wrapper">
                                    <div id="content" style="height: 300px; margin-bottom: 10px;"></div>
                                    <textarea name="content" style="display: none;">{!! old('content', $cmsPage->content ?? '') !!}</textarea>
                                    @if ($errors->has('content'))
                                    <span class="help-block text-danger">{{ $errors->first('content') }}</span>
                                    @endif
                                  
                                </div>
                            </div>
                          </div>
                          
                          
                         
                        </div>
                      </div>
                      <!-- /.box-body -->
                      <div class="box-footer px-0">
                          <div class="col-sm-12 text-end">
                              <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">{{__('app.cancel')}}</a>
                              <button type="submit" class="btn btn-primary" id="submitBtn">{{__('app.update')}}</button>
                          </div>
                          
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

            
        </div>
      </div>
      <!-- /.box -->

    </section>
    <!-- /.content -->

<!-- Include Quill.js -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    // Quill.js setup for content field
    var quill = new Quill('#content', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'align': [] }],
                ['link'],
                ['clean']
            ]
        },
        placeholder: 'Enter content...',
        readOnly: false
    });

    // Set initial content if exists
    var initialContent = $('textarea[name="content"]').val();
    if (initialContent) {
        quill.clipboard.dangerouslyPasteHTML(initialContent);
    }

    // Simple required validation for content
    jQuery.validator.addMethod("quillrequired", function (value, element) {
        var html = quill.root.innerHTML;
        return html.trim() !== '' && html.trim() !== '<p><br></p>';
    }, $.validator.format("This field is required"));

    // Remove jQuery validation completely to avoid conflicts with Quill
    // We'll do manual validation instead

    // Form submission
    $('#cms-form').on('submit', function(e){
        e.preventDefault();
        
        // Update the textarea with Quill content before submission
        var quillContent = quill.root.innerHTML;
        $('textarea[name="content"]').val(quillContent);
        
        // Manual validation
        var pageName = $('input[name="page_name"]').val();
        if (!pageName || pageName.trim().length < 3) {
            alert('Page name is required and must be at least 3 characters');
            $('input[name="page_name"]').focus();
            return;
        }
        
        if (quillContent.trim() === '' || quillContent.trim() === '<p><br></p>') {
            alert('Please enter content');
            return;
        }
        
        var $form = $(this);
        
        var formData = new FormData($form[0]);
        
        var $btn = $('#submitBtn');
        $btn.prop('disabled', true).text('Saving...');
        
        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function(resp){
                if (resp && (resp.status === 'success' || resp.success)){
                    if (window.toastr) toastr.success(resp.message || 'CMS updated successfully');
                    setTimeout(function(){
                        window.location.href = '{{ $backBtnLink }}';
                    }, 1000);
                } else {
                    if (window.toastr) toastr.error(resp && resp.message ? resp.message : 'Failed to update');
                }
            },
            error: function(xhr){
                if (xhr && xhr.responseJSON && xhr.responseJSON.errors){
                    var errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(function(k){ if (window.toastr) toastr.error(errors[k][0]); });
                } else if (xhr && xhr.responseJSON && xhr.responseJSON.message){
                    if (window.toastr) toastr.error(xhr.responseJSON.message);
                } else {
                    if (window.toastr) toastr.error('Something went wrong');
                }
            },
            complete: function(){ $btn.prop('disabled', false).text('{{__('app.update')}}'); }
        });
    });
});
</script>
@endsection