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

      <div class="main-panel">
        <div class="row grid-margin">
        <div class="col-lg-12">
            <div class="card">
            <div class="card-body">
                <h4 class="card-title">Page Add</h4>
              <form class="dynamic-form" method="post" action="{{ route('pages.storeOrUpdate') }}" enctype="multipart/form-data">
                @csrf
                <input type ="hidden" name="id" value="{{$page->id ?? ""}}">
                <fieldset>
                 
                  <div class="form-group">
                    <label for="type">Select Type</label>
                    <select id="type" name="type" class="form-control">
                        <option value="">Select Type</option>
                        <option value="about" {{ (isset($page) && $page->type == 'about') ? 'selected' : '' }}>About</option>
                        <option value="contact" {{ (isset($page) && $page->type == 'contact') ? 'selected' : '' }}>Contact</option>
                        <option value="faq" {{ (isset($page) && $page->type == 'faq') ? 'selected' : '' }}>FAQ</option>
                        <option value="terms && condition" {{ (isset($page) && $page->type == 'terms && condition') ? 'selected' : '' }}>Terms & Condition</option>
                        <option value="refund & return policy" {{ (isset($page) && $page->type == 'refund & return policy') ? 'selected' : '' }}>Refund & Return Policy </option>
                         <option value="privacy_policy" {{ (isset($page) && $page->type == 'privacy_policy') ? 'selected' : '' }}>Privacy Policy</option>
                        <option value="disclaimer_privacy" {{ (isset($page) && $page->type == 'disclaimer_privacy') ? 'selected' : '' }}>Disclaimer Privacy</option>
                    </select>
                 </div>
                <div class="form-group">
                    <label for="cname">Title</label>
                    <input id="title" class="form-control" name="title" value="{{$page->title ?? ''}}" type="text">
                </div>
                <div class="form-group">
                    <label for="cname">Slug</label>
                    <input id="slug" class="form-control" name="slug" value="{{$page->slug ?? ''}}" type="text" readonly>
                </div>

                      
                {{-- faq --}}
            {{-- Content section --}}
                <div id="content-section" style="{{ (isset($page) && $page->type == 'faq') ? 'display:none' : '' }}">
                    <div class="form-group">
                        <label for="content">Page Content</label>
                        <textarea name="content" id="content">{{ $page->content ?? '' }}</textarea>
                    </div>
                </div>

                {{-- FAQ section --}}
                <div id="faq-section" style="{{ (isset($page) && $page->type == 'faq') ? '' : 'display:none' }}">
                    <div id="faq-container">
                        @if(!empty($faqs))
                            @foreach($faqs as $index => $faq)
                                <div class="faq-item mb-2">
                                    <input type="text" name="faq[{{ $index }}][question]" value="{{ $faq['question'] ?? '' }}" class="form-control mb-1" placeholder="Question">
                                    <textarea name="faq[{{ $index }}][answer]" class="form-control" placeholder="Answer">{{ $faq['answer'] ?? '' }}</textarea>
                                    <button type="button" class="btn btn-sm btn-danger remove-faq mt-1">Remove</button>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <button type="button" id="add-faq" class="btn btn-primary mt-2">+ Add FAQ</button>
                </div>


                        
                <div class="form-group">
                    <label>Full Description</label>
                     <textarea name="description" id="editor">{{ old('description', $page->description ?? '') }}</textarea>
                </div>

                <div class="form-group">
                    <label>Gallery Images</label><br>
                    <label class="btn btn-outline-secondary">
                        Upload Gallery Images 
                        <input type="file" name="image" class="image-input" data-preview="#previewProduct">
                    </label>

                    <div id="previewProduct" class="mt-2">
                        @if(!empty($page->image))
                            <img src="{{ asset('uploads/page/'.$page->image) }}" 
                                alt="Product Image" 
                                style="max-width:150px; max-height:150px; object-fit:cover;">
                        @endif
                    </div>
                </div>
                     <button type="submit" class="btn btn-success" value="">{{ isset($page) && $page->id ? 'Update page' : 'Submit page' }}</button>
                </fieldset>
            </form>

            </div>
            </div>
        </div>
        </div>
      </div>
@endsection

  @push('scripts')



<script>
$(document).ready(function () {
    function toggleSections() {
        var type = $('#type').val();
        if (type === 'faq') {
            $('#faq-section').show();
            $('#content-section').hide();
        } else if (type) {
            $('#faq-section').hide();
            $('#content-section').show();
        } else {
            $('#faq-section, #content-section').hide();
        }
    }

    // Initial call
    toggleSections();

   
    $(document).on('change', '#type', function () {
        toggleSections();
    });

    var faqIndex = $('#faq-container .faq-item').length; // existing count

    // Add new FAQ
    $(document).on('click', '#add-faq', function () {
        var faqHtml = `
            <div class="faq-item mb-2">
                <input type="text" name="faq[${faqIndex}][question]" class="form-control mb-1" placeholder="Question">
                <textarea name="faq[${faqIndex}][answer]" class="form-control" placeholder="Answer"></textarea>
                <button type="button" class="btn btn-sm btn-danger remove-faq mt-1">Remove</button>
            </div>
        `;
        $('#faq-container').append(faqHtml);
        faqIndex++;
    });

    // Remove FAQ
    $(document).on('click', '.remove-faq', function () {
        $(this).closest('.faq-item').remove();
    });
});


</script>
@endpush