@extends('admin.layout.main')

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

@section('content')
<h1 class="h3 mb-4 text-gray-800">Management FAQ</h1>

{{-- Tombol Tambah --}}
<button class="btn btn-primary mb-3" data-toggle="modal" data-target="#modalCreate">
    <i class="fas fa-plus fa-sm"></i> Tambah FAQ
</button>

<div class="card shadow mb-4">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th width="5%">No</th>
                        <th width="30%">Pertanyaan</th>
                        <th>Jawaban</th>
                        <th width="15%">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($faqs as $faq)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $faq->question }}</td>
                        <td>{{ $faq->answer }}</td>
                        <td>
                            {{-- Tombol Edit dengan data- atribut untuk JS --}}
                            <button 
                                type="button"
                                class="btn btn-warning btn-sm btn-edit-faq"
                                data-id="{{ $faq->id }}"
                                data-question="{{ $faq->question }}"
                                data-answer="{{ $faq->answer }}"
                                data-toggle="modal"
                                data-target="#modalEdit">
                                <i class="fas fa-edit"></i> Edit
                            </button>

                            <form action="{{ route('admin.management-faq.destroy', $faq->id) }}" 
                                  method="POST" 
                                  class="d-inline delete-faq-form">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal Create --}}
<div class="modal fade" id="modalCreate" 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">Tambah FAQ</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-faq.store') }}" method="POST" id="form-faq-create">
                @csrf
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label>Pertanyaan</label>
                        <input type="text" name="question" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label>Jawaban</label>
                        <textarea name="answer" class="form-control" rows="4" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
                    <button type="submit" class="btn btn-success">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal Edit --}}
<div class="modal fade" id="modalEdit" 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">Edit FAQ</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" id="form-faq-edit">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label>Pertanyaan</label>
                        <input type="text" name="question" id="edit-question" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label>Jawaban</label>
                        <textarea name="answer" id="edit-answer" class="form-control" rows="4" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Script jQuery untuk Handle Pengisian Data Modal Edit --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.btn-edit-faq').on('click', function() {
            // 1. Ambil data dari tombol yang diklik
            var id = $(this).data('id');
            var question = $(this).data('question');
            var answer = $(this).data('answer');

            // 2. Isi value ke dalam input modal edit
            $('#edit-question').val(question);
            $('#edit-answer').val(answer);

            // 3. Ubah attribute action form secara dinamis menuju URL Update Resource Admin
            var updateUrl = "{{ url('admin/management-faq') }}/" + id;
            $('#form-faq-edit').attr('action', updateUrl);
        });
    });
</script>
@endsection