@extends('admin.layout.main')

@section('title', 'Management Bantuan - Admin PeGas')

@section('content')
  <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Manajemen Bantuan</h1>
    <button type="button" class="btn btn-sm btn-primary shadow-sm" onclick="refreshPage(this)">
        <i class="fas fa-sync fa-sm text-white-50 mr-1"></i> Muat Ulang Data
    </button>
  </div>

  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">Daftar Tiket Bantuan User</h6>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>Tanggal</th>
              <th>User</th>
              <th>Pesan</th>
              <th>Lampiran</th>
              <th>Status</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody>
            @foreach($helpdesks as $h)
              <tr>
                <td>{{ $h->created_at->format('d/m/Y H:i') }}</td>
                <td>{{ $h->user->name }}</td>
                <td>{{ Str::limit($h->message, 50) }}</td>
                <td>
                  @if($h->attachment)
                    <a href="{{ asset($h->attachment) }}" target="_blank" class="btn btn-sm btn-info">
                      <i class="fas fa-image"></i> Lihat
                    </a>
                  @else
                    <span class="text-muted small">No File</span>
                  @endif
                </td>
                <td>
                  @if($h->status === 'answered' || $h->reply)
                    <span class="badge badge-success">Sudah Dijawab</span>
                  @else
                    <span class="badge badge-warning">Menunggu</span>
                  @endif
                </td>
                <td>
                  <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#replyModal{{ $h->id }}">
                    <i class="fas fa-reply"></i> Balas
                  </button>
                  
                  <form action="{{ route('admin.management-bantuan.destroy', $h->id) }}" method="POST" class="d-inline">
                    @csrf 
                    @method('DELETE')
                    <button type="button" class="btn btn-danger btn-sm btn-delete-bantuan">
                      <i class="fas fa-trash"></i>
                    </button>
                  </form>
                </td>
              </tr>

              <div class="modal fade" id="replyModal{{ $h->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Balas Pesan: {{ $h->user->name }}</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <form action="{{ route('admin.management-bantuan.update', $h->id) }}" method="POST" enctype="multipart/form-data" class="form-reply-bantuan">
                      @csrf 
                      @method('PUT')
                      <div class="modal-body">
                        <div class="mb-3">
                          <label class="font-weight-bold">Pesan User:</label>
                          <p class="p-3 bg-light rounded text-justify" style="font-size: 0.9rem;">{{ $h->message }}</p>
                        </div>
                        <div class="form-group">
                          <label class="font-weight-bold text-primary">Jawaban Admin:</label>
                          <textarea name="reply" class="form-control" rows="4" required placeholder="Tulis jawaban bantuan di sini...">{{ $h->reply }}</textarea>
                        </div>
                        <div class="form-group">
                          <label class="font-weight-bold text-primary">Lampiran Balasan (Gambar):</label>
                          <input type="file" name="reply_attachment" class="form-control-file" accept="image/*">
                          @if($h->reply_attachment)
                            <div class="mt-2 border p-2 rounded">
                              <small class="text-muted d-block mb-1">Gambar saat ini:</small>
                              <img src="{{ asset($h->reply_attachment) }}" width="120" class="img-thumbnail">
                            </div>
                          @endif
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Kirim Jawaban</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection