@extends('backend.layouts.app')
@php
  use App\Models\Faq;
@endphp
@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.faqs.index') }}">{{__('app.faqs.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="faqForm" class="form-horizontal form-validate" method="POST" enctype="multipart/form-data">
                  @csrf
                  <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                  
                      <div class="box-body px-0 form-box-scroll">
                      
                        <div class="row">
                          <div class="col-md-4">
                          
                            <div class="form-group">
                                <label for="position" class="control-label">{{__('app.faqs.position')}}</label>
                                <div class="col-field-wrapper">
                                    <input type="number" name="position" class="form-control" id="position" placeholder="Enter position" value="{{ old('position', $pageData['position'] ?? '') }}">
                                    @if ($errors->has('position'))
                                    <span class="help-block">{{ $errors->first('position') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          
                          <div class="col-md-4">
                         
                            <div class="form-group">
                                <label for="question" class="control-label">{{__('app.faqs.question')}}</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="question" class="form-control" id="question" placeholder="Enter question" value="{{ old('question', $pageData['question'] ?? '') }}">
                                    @if ($errors->has('question'))
                                    <span class="help-block">{{ $errors->first('question') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-8">
                            <div class="form-group">
                                <label for="answer" class="control-label">{{__('app.faqs.answer')}}</label>
                                <div class="col-field-wrapper">
                                    <textarea name="answer" class="form-control custom-min-height-111" id="answer" placeholder="Enter answer">{{ old('answer', $pageData['answer'] ?? '') }}</textarea>
                                    @if ($errors->has('answer'))
                                    <span class="help-block">{{ $errors->first('answer') }}</span>
                                    @endif
                                  
                                </div>
                            </div>

                            @if (isset($pageData))
                            <div class="col-md-4 mt-3">
                              <div class="form-group">
                                <label for="description" class="control-label col-md-5 fw-semibold text-color-2D3648">{{__('app.status')}}</label>
                                <div class="col-field-wrapper col-md-7">
                                  <div class="form-check-group">
                                    <div class="d-flex justify-content-xl-start gap-4">
                                      <label class="custom-radio">
                                        <input type="radio" name="status" value="1" {{ old('status', $pageData['status'] ?? '') == Faq::STATUS_ACTIVE ? 'checked' : '' }}>
                                        <span>{{__('app.active')}}</span>
                                      </label>
                                      <label class="custom-radio">
                                        <input type="radio" name="status" value="0" {{ old('status', $pageData['status'] ?? '') == Faq::STATUS_INACTIVE ? 'checked' : '' }}>
                                        <span>{{__('app.inactive')}}</span>
                                      </label>
                                    </div>
                                    <span class="help-block text-danger mt-1 d-block" id="error-status"></span>
                                  </div>
                                </div>
                              </div>
                            </div>
                            @endif
                          </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">{{ $saveBtn }}</button>
                          </div>
                          
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

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

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

<script type="text/javascript">
$(document).ready(function () {
    $('.form-validate').validate({
      debug: false,
      ignore : [],
      errorClass: 'help-block',
      errorElement: "span",
      rules: {
          position: {
              required: true,
              number: true,
              min: 1,
          },
          question: {
              required: true,
              maxlength: 500,
          },
          answer: {
              required: true,
              maxlength: 1000,
          },
      },
      messages: {
        position: {
          required: "Please enter position",
          number: "Please enter a valid number",
          min: "Position must be greater than 0",
        },
        question: {
          required: "Please enter question",
          maxlength: "question must not exceed 500 characters",
        },
        answer: {
          required: "Please enter answer",
          maxlength: "answer must not exceed 1000 characters",
        },
      },
      submitHandler: function(form) {
          submitForm();
      }
    });

    function submitForm() {
        var formData = new FormData($('#faqForm')[0]);
        
        // Add _method for PUT requests
        if ('{{ $pageData }}') {
            formData.append('_method', 'PUT');
        }
        
        // Debug: Log form data
        for (var pair of formData.entries()) {
            console.log(pair[0] + ': ' + pair[1]);
        }
        
        var submitBtn = $('#submitBtn');
        var originalText = submitBtn.text();
        
        // Disable button and show loading
        submitBtn.prop('disabled', true).text('saving...');
        
        // Determine the URL based on whether it's create or update
        var url = '{{ $pageData ? route("superadmin.faqs.update", $pageData["id"]) : route("superadmin.faqs.store") }}';
        
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            },
            success: function(response) {
                if (response.status === 'success') {
                    // Show success message
                    toastr.success(response.message);
                    
                    // Redirect to index page after a short delay
                    setTimeout(function() {
                        window.location.href = '{{ route("superadmin.faqs.index") }}';
                    }, 1500);
                } else {
                    toastr.error(response.message || '{{__("messages.something_went_wrong")}}');
                }
            },
            error: function(xhr) {
                var response = xhr.responseJSON;
                if (response && response.errors) {
                    // Display validation errors
                    $.each(response.errors, function(field, errors) {
                        var errorElement = $('#' + field).siblings('.help-block');
                        if (errorElement.length === 0) {
                            errorElement = $('<span class="help-block"></span>');
                            $('#' + field).parent().append(errorElement);
                        }
                        errorElement.text(errors[0]);
                    });
                } else {
                    toastr.error(response.message || '{{__("messages.something_went_wrong")}}');
                }
            },
            complete: function() {
                // Re-enable button
                submitBtn.prop('disabled', false).text(originalText);
            }
        });
    }
});
</script>
@endsection