@extends('layouts.app')
@section('title', 'FAQs List')

@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>FAQs</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
          <li class="breadcrumb-item active">FAQs</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header d-flex justify-content-end">
            <a href="{{ route('faqs.create') }}" class="btn btn-primary mr-2">
              <i class="fa fa-plus nav-icon"></i> Add
            </a>
            <a id="exportBtn" class="btn btn-success">
              <i class="fa fa-download"></i> Export CSV
            </a>
          </div>
          <div class="card-body">
            <div class="row mb-3">
              <div class="col-md-3">
                <label for="filter-type">Type</label>
                <select id="filter-type" class="form-control filter-select">
                  <option value="">All</option>
                  <option value="0">Product</option>
                  <option value="1">Service</option>
                  <option value="2">Generic</option>
                </select>
              </div>
              <div class="col-md-3">
                <label for="filter-name">Name</label>
                <select id="filter-name" class="form-control filter-select">
                  <option value="">All</option>
                </select>
              </div>
            </div>

            <table id="faq-table" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>Faq Id</th>
                  <th>Product ID</th>
                  <th>Service ID</th>
                  <th>Product Name</th>
                  <th>Service Name</th>
                  <th>Type</th>
                  <th>Question</th>
                  <th>Answer</th>
                  <th>Created At</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('scripts')
<script src="{{asset('js/custom.js')}}"></script>

<script>
  const products = @json($products);
  const services = @json($services);

  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });

  function populateName(type) {
    const sel = $('#filter-name').empty().append('<option value="">All</option>');
    if (type === '0') {
      for (let [id, name] of Object.entries(products)) {
        sel.append(`<option value="${id}">${name}</option>`);
      }
    } else if (type === '1') {
      for (let [id, name] of Object.entries(services)) {
        sel.append(`<option value="${id}">${name}</option>`);
      }
    }
  }

  $(function() {
    // Initialize Select2 for filter dropdowns
    $('.filter-select').select2({
      placeholder: "Select an option",
      allowClear: true,
      width: '100%'
    });

    const table = $('#faq-table').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: '{{ route("faqs.index") }}',
        data: function(d) {
          d.type = $('#filter-type').val();
          d.name = $('#filter-name').val();
        }
      },
      columns: [
        {
          data: 'faq_id',
          name: 'faq_id',
          defaultContent: '-',
        },
        {
          data: 'garage_product_id',
          name: 'gp.garage_product_id',
          defaultContent: '-',
        },
        {
          data: 'garage_service_id',
          name: 'gs.garage_service_id',
          defaultContent: '-',
        },
        {
          data: 'product_name',
          name: 'p.name',
          defaultContent: '-',
        },
        {
          data: 'service_name',
          name: 's.name',
          defaultContent: '-',
        },
        {
          data: 'type',
          name: 'faqs.type',
          defaultContent: '-',
        },
        {
          data: 'question',
          name: 'fd.question',
          defaultContent: '-',
        },
        {
          data: 'answer',
          name: 'fd.answer',
          defaultContent: '-',
        },
        {
          data: 'created_at',
          name: 'created_at'
        },
        {
          data: 'actions',
          name: 'actions',
          orderable: false,
          searchable: false
        }
      ],
      order: [
        [0, 'desc']
      ],
      columnDefs: [{
        orderable: false,
        targets: [5, 6, 7]
      }],
      language: {
        emptyTable: "No FAQs available."
      }
    });

    // Filter by type
    $('#filter-type').on('change', function() {
      populateName(this.value);
      table.ajax.reload();
    });

    // Filter by name
    $('#filter-name').on('change', function() {
      table.ajax.reload();
    });
    populateName(null);

    $(document).on('click', '.delete-btn', function(e) {
      e.preventDefault();
      var deleteUrl = '/admin/faqs/delete/' + $(this).data('id');
      var faqId = $(this).data('id');

      if (confirm('Are you sure you want to delete this FAQ detail?')) {
        $.ajax({
          url: deleteUrl,
          type: 'DELETE',
          success: function(response) {
            alert(response.message);
            table.ajax.reload();
          },
          error: function(xhr) {
            alert('Error: ' + xhr.responseJSON.message);
          }
        });
      }
    });
    // Export CSV button
    $(document).on('click', '#exportBtn', function(e) {
      e.preventDefault();
      var exportUrl = "{{ route('faqs.export') }}";

      window.location.href = exportUrl;
    });
    // Export CSV button
    $(document).on('click', '#exportBtn', function(e) {
      e.preventDefault();
      // Get the URL for the export route
      var exportUrl = "{{ route('faqs.export') }}";
      window.location.href = exportUrl;
    });
  });
</script>
@endsection