@php ($headerOption = [
'title' => 'FAQ Details',
'header_buttons' => [
  '<a class="'. \Config::get('view.buttons.secondary') .'" href="'. route($routePrefix . '.index') .'" data-toggle="tooltip" data-original-title="Back to FAQ List"><i class="bx bx-arrow-back"></i> <span>Back</span></a>',
  ($permission['edit'] ? '<a class="'. \Config::get('view.buttons.primary') .'" href="'. route($routePrefix . '.edit', $data->id) .'" data-toggle="tooltip" data-original-title="Edit FAQ"><i class="bx bx-edit"></i> <span>Edit</span></a>' : ''),
],
])
@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="row">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-body">
        <div class="mb-4">
          <h5 class="card-title">Question</h5>
          <p class="card-text">{{ $data->question }}</p>
        </div>

        <div class="mb-4">
          <h5 class="card-title">Answer</h5>
          <div class="card-text">
            {!! nl2br(e($data->answer)) !!}
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <h6>Status</h6>
            {!! $data->status_badge !!}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">
          <i class="bx bx-info-circle"></i> FAQ Information
        </h5>
        <ul class="list-unstyled">
          <li class="mb-2">
            <strong>ID:</strong> 
            <span class="badge badge-secondary">{{ $data->id }}</span>
          </li>
          <li class="mb-2">
            <strong>Status:</strong> 
            {!! $data->status_badge !!}
          </li>
          <li class="mb-2">
            <strong>Created:</strong> 
            <span class="text-muted">{{ $data->created_at->format('M d, Y H:i') }}</span>
          </li>
          <li class="mb-2">
            <strong>Last Updated:</strong> 
            <span class="text-muted">{{ $data->updated_at->format('M d, Y H:i') }}</span>
          </li>
          @if($data->created_at != $data->updated_at)
          <li class="mb-2">
            <strong>Time Since Update:</strong> 
            <span class="text-muted">{{ $data->updated_at->diffForHumans() }}</span>
          </li>
          @endif
        </ul>

        @if($permission['edit'] || $permission['destroy'])
        <hr>
        <div class="d-flex gap-2">
          @if($permission['edit'])
          <a href="{{ route($routePrefix . '.edit', $data->id) }}" class="btn btn-primary btn-sm">
            <i class="bx bx-edit"></i> Edit
          </a>
          <button type="button" class="btn btn-{{ $data->status == 1 ? 'warning' : 'success' }} btn-sm" 
                  onclick="toggleStatus({{ $data->id }})">
            <i class="bx bx-{{ $data->status == 1 ? 'hide' : 'show' }}"></i>
            {{ $data->status == 1 ? 'Deactivate' : 'Activate' }}
          </button>
          @endif
          @if($permission['destroy'])
          <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete({{ $data->id }})">
            <i class="bx bx-trash"></i> Delete
          </button>
          @endif
        </div>
        @endif
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <h5 class="card-title">
          <i class="bx bx-export"></i> Export Options
        </h5>
        <p class="text-muted">Export this FAQ along with other active FAQs to PDF format.</p>
        <a href="{{ route('export.faqs') }}" class="btn btn-outline-secondary btn-sm">
          <i class="bx bx-download"></i> Export All Active FAQs
        </a>
      </div>
    </div>
  </div>
</div>
@endsection

@section('page_js')
<script>
function toggleStatus(id) {
    if (confirm('Are you sure you want to change the status of this FAQ?')) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: '{{ route("faqs.toggle-status", ":id") }}'.replace(':id', id),
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                if (response.status === 200) {
                    toastr.success(response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                } else {
                    toastr.error(response.message || 'Something went wrong');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                toastr.error(response?.message || 'Something went wrong');
            }
        });
    }
}

function confirmDelete(id) {
    if (confirm('Are you sure you want to delete this FAQ? This action cannot be undone.')) {
        // Create a form and submit it for DELETE request
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("faqs.destroy", ":id") }}'.replace(':id', id);
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add method override for DELETE
        const methodOverride = document.createElement('input');
        methodOverride.type = 'hidden';
        methodOverride.name = '_method';
        methodOverride.value = 'DELETE';
        form.appendChild(methodOverride);
        
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection