@extends('admin.layouts.admin')

@section('title', 'Inquiries - SIVILIMA Admin')
@section('breadcrumb_title', 'Inquiries')
@section('breadcrumb')
  <li class="breadcrumb-item active" aria-current="page">Contact Inquiries</li>
@endsection

@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{ session('success') }}</div>
@endif

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Contact Inquiries ({{ $inquiries->count() }})
          <span class="badge bg-warning text-dark ms-2">{{ $inquiries->where('is_read', false)->count() }} unread</span>
        </h6>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered align-middle">
            <thead>
              <tr>
                <th width="50">#</th>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Interest</th>
                <th>Message</th>
                <th>Date</th>
                <th width="100">Actions</th>
              </tr>
            </thead>
            <tbody>
              @forelse($inquiries as $inq)
              <tr class="{{ $inq->is_read ? '' : 'table-warning' }}">
                <td>{{ $loop->iteration }}</td>
                <td><strong>{{ $inq->name }}</strong></td>
                <td>{{ $inq->phone }}</td>
                <td>{{ $inq->email }}</td>
                <td><span class="badge bg-secondary">{{ $inq->interest }}</span></td>
                <td><small>{{ Str::limit($inq->message, 50) }}</small></td>
                <td><small>{{ $inq->created_at->format('M d, H:i') }}</small></td>
                <td>
                  <div class="d-flex gap-1">
                    <button class="btn btn-sm btn-outline-info view-inquiry" data-bs-toggle="modal" data-bs-target="#inqModal"
                      data-name="{{ $inq->name }}"
                      data-phone="{{ $inq->phone }}"
                      data-email="{{ $inq->email }}"
                      data-interest="{{ $inq->interest }}"
                      data-message="{{ $inq->message }}"
                      data-date="{{ $inq->created_at->format('M d, Y H:i') }}"
                    ><i class="bi bi-eye"></i></button>
                    @if(!$inq->is_read)
                    <form method="POST" action="{{ route('admin.inquiries.read', $inq) }}" style="display:inline">
                      @csrf @method('PATCH')
                      <button class="btn btn-sm btn-outline-success" title="Mark Read"><i class="bi bi-check-lg"></i></button>
                    </form>
                    @endif
                    <form method="POST" action="{{ route('admin.inquiries.destroy', $inq) }}" onsubmit="return confirm('Delete?')" style="display:inline">
                      @csrf @method('DELETE')
                      <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                    </form>
                  </div>
                </td>
              </tr>
              @empty
              <tr><td colspan="8" class="text-center text-muted py-4">No inquiries yet.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Detail Modal -->
<div class="modal fade" id="inqModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title inquiry-modal-name">-</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <div class="mb-2"><strong>Phone:</strong> <span class="inquiry-modal-phone"></span></div>
        <div class="mb-2"><strong>Email:</strong> <span class="inquiry-modal-email"></span></div>
        <div class="mb-2"><strong>Interest:</strong> <span class="inquiry-modal-interest"></span></div>
        <div class="mb-2"><strong>Date:</strong> <span class="inquiry-modal-date"></span></div>
        <hr>
        <p class="inquiry-modal-message"></p>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.view-inquiry').forEach(btn => {
    btn.addEventListener('click', function() {
      document.querySelector('.inquiry-modal-name').textContent = this.dataset.name;
      document.querySelector('.inquiry-modal-phone').textContent = this.dataset.phone;
      document.querySelector('.inquiry-modal-email').textContent = this.dataset.email;
      document.querySelector('.inquiry-modal-interest').textContent = this.dataset.interest;
      document.querySelector('.inquiry-modal-date').textContent = this.dataset.date;
      document.querySelector('.inquiry-modal-message').textContent = this.dataset.message;
    });
  });
});
</script>
@endpush