@extends('dashboard.base')

@section('content')
@php
use Carbon\Carbon;
@endphp

@if(session('success'))
<div class="alert alert-success"> {{ session('success') }} </div>
@endif
@if($errors->any())
<div class="alert alert-danger">
  <ul>
    @foreach($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif

<div class="container-fluid">
  <h3 class="mb-4">Forwarded Queries</h3>
  <div class="card">
    <div class="card-body">

      <!-- Filters + Download -->
      <div class="row mb-3 align-items-end">
        <div class="col-md-3">
          <label>Status</label>
          <select id="statusFilter" class="form-control">
            <option value="">All</option>
            @foreach($complaints->pluck('status')->unique() as $status)
            <option value="{{ $status }}">{{ $status }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-3">
          <label>Department</label>
          <select id="departmentFilter" class="form-control">
            <option value="">All</option>
            @foreach($complaints->pluck('department')->unique() as $dept)
            <option value="{{ $dept }}">{{ $dept }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-3">
          <label>Date</label>
          <input type="date" id="dateFilter" class="form-control">
        </div>
        <div class="col-md-3 text-right">
          <button id="downloadPdf" class="btn btn-primary">Download PDF</button>
        </div>
      </div>

      <table class="table table-bordered table-hover" id="deptComplaintsTable">
        <thead class="thead-light">
          <tr>
            <th>#</th>
            <th>User</th>
            <th>Subject</th>
            <th>Department</th>
            <th>Status</th>
            <th>Date</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach($complaints as $index => $complaint)
          <tr
            data-id="{{ $complaint->id }}"
            data-name="{{ $complaint->complainant_name }}"
            data-email="{{ $complaint->email }}"
            data-phone="{{ $complaint->phone }}"
            data-organisation="{{ $complaint->organisation }}"
            data-location="{{ $complaint->location }}"
            data-city="{{ $complaint->city }}"
            data-country="{{ $complaint->country }}"
            data-subject="{{ $complaint->subject }}"
            data-description="{{ $complaint->description }}"
            data-doc="{{ $complaint->supporting_docs }}"
            data-department="{{ $complaint->department }}"
            data-date="{{ Carbon::parse($complaint->created_at)->format('Y-m-d') }}"
            data-message="{{ $complaint->message }}"
            data-status="{{ $complaint->status }}"
          >
            <td>{{ $index + 1 }}</td>
            <td>{{ $complaint->complainant_name }} <br><small>{{ $complaint->email }}</small></td>     
            <td>{{ $complaint->subject }}</td>
            <td>{{ $complaint->department }}</td>
            <td>
              <span class="badge status-badge {{ $complaint->status == 'Resolved' ? 'badge-success' : 'badge-secondary' }}">
                {{ $complaint->status }}
              </span>
            </td>
            <td>{{ Carbon::parse($complaint->created_at)->format('Y-m-d') }}</td>
            <td class="d-flex gap-2">
              <button type="button" class="btn btn-sm btn-warning more-info-btn">More Info</button>
              <button type="button" class="btn btn-sm btn-success add-message-btn" data-id="{{ $complaint->id }}">Add Message</button>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>

    </div>
  </div>
</div>

<!-- Complaint Modal -->
<div class="modal fade" id="deptComplaintModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Query Details</h5>
        <button type="button" class="close" onclick="closeModal(deptComplaintModal)">&times;</button>
      </div>
      <div class="modal-body">
        <p><strong>Name:</strong> <span id="modalName"></span></p>
        <p><strong>Email:</strong> <span id="modalEmail"></span></p>
        <p><strong>Phone:</strong> <span id="modalPhone"></span></p>
        <p><strong>Organisation:</strong> <span id="modalOrganisation"></span></p>
        <p><strong>Location:</strong> <span id="modalLocation"></span></p>
        <p><strong>City:</strong> <span id="modalCity"></span></p>
        <p><strong>Country:</strong> <span id="modalCountry"></span></p>
        <p><strong>Subject:</strong> <span id="modalSubject"></span></p>
        <p><strong>Description:</strong> <span id="modalDescription"></span></p>
        <p><strong>Supporting Docs:</strong> <a href="#" target="_blank" id="modalDoc">N/A</a></p>
        <hr>
        <p><strong>Message:</strong> <span id="modalMessage"></span></p>
      </div>
    </div>
  </div>
</div>

<!-- Add Message Modal -->
<div class="modal fade" id="messageModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="{{ route('complaints.addMessage') }}">
        @csrf
        <input type="hidden" name="complaint_id" id="messageComplaintId">
        <div class="modal-header">
          <h5 class="modal-title">Add Message</h5>
          <button type="button" class="close" onclick="closeModal(messageModal)">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="messageText">Message</label>
            <textarea class="form-control" name="message" id="messageText" rows="4" required></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Send</button>
          <button type="button" class="btn btn-secondary" onclick="closeModal(messageModal)">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('javascript')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<script>
$(document).ready(function () {
  const table = $('#deptComplaintsTable').DataTable({
    dom: 'Bfrtip',
    buttons: [
      {
        extend: 'pdfHtml5',
        className: 'btn btn-primary btn-sm',
        text: 'Download PDF',
        title: 'Forwarded Queries Report',
        exportOptions: { columns: [0,1,2,3,4,5] }
      }
    ],
    pageLength: 10,
  });

  // Move PDF button into filters row
  table.buttons().container().appendTo('#downloadPdf').hide(); 
  $('#downloadPdf').on('click', function () {
    table.button('.buttons-pdf').trigger();
  });

  // Filters
  function applyFilters() {
    table.column(4).search($('#statusFilter').val());
    table.column(3).search($('#departmentFilter').val());
    table.column(5).search($('#dateFilter').val());
    table.draw();
  }
  $('#statusFilter, #departmentFilter, #dateFilter').on('change', applyFilters);

  // Modal functions
  function openModal(modal) {
    modal.classList.add('show');
    modal.style.display = 'block';
    modal.setAttribute('aria-modal', 'true');
    modal.removeAttribute('aria-hidden');
    document.body.classList.add('modal-open');
    let backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.id = modal.id + '-backdrop';
    document.body.appendChild(backdrop);
  }

  function closeModal(modal) {
    modal.classList.remove('show');
    modal.style.display = 'none';
    modal.setAttribute('aria-hidden', 'true');
    modal.removeAttribute('aria-modal');
    document.body.classList.remove('modal-open');
    let backdrop = document.getElementById(modal.id + '-backdrop');
    if (backdrop) backdrop.remove();
  }
  window.closeModal = closeModal;

  // More Info button
  $('.more-info-btn').on('click', function() {
    const row = $(this).closest('tr');
    $('#modalName').text(row.data('name'));
    $('#modalEmail').text(row.data('email'));
    $('#modalPhone').text(row.data('phone'));
    $('#modalOrganisation').text(row.data('organisation'));
    $('#modalLocation').text(row.data('location'));
    $('#modalCity').text(row.data('city'));
    $('#modalCountry').text(row.data('country'));
    $('#modalSubject').text(row.data('subject'));
    $('#modalDescription').text(row.data('description'));
    $('#modalMessage').text(row.data('message') || 'No message yet');
    const doc = row.data('doc');
    if(doc) { $('#modalDoc').attr('href','/storage/'+doc).text(doc); }
    else { $('#modalDoc').attr('href','#').text('N/A'); }
    openModal(document.getElementById('deptComplaintModal'));
  });

  // Add Message button
  $('.add-message-btn').on('click', function() {
    $('#messageComplaintId').val($(this).data('id'));
    openModal(document.getElementById('messageModal'));
  });
});
</script>
@endsection