@extends('layouts.shared.admin-data-listing')

@section('title', 'Audit Triggers')
@section('shortDesc', 'Manage audit triggers and their outcomes.')

@section('filters')
<form method="GET" class="d-flex flex-column gap-3">
    <h5 class="card-title m-0">Filter</h5>

    <input type="text" name="search" class="form-control form-control-sm" placeholder="Search by citation or industry">

    <button class="btn-cta text-white fill w-100">Search</button>
</form>
@endsection

@section('data')

<div class="table-responsive">
    <table class="table align-middle">
        <thead>
            <tr>
                <th>#</th>
                <th>Citation</th>
                <th>Outcome</th>
                <th>Created At</th>
            </tr>
        </thead>
        <tbody>
            @forelse($auditTriggers as $key => $trigger)
            <tr>
                <td><span class="text-muted small">{{ $key + 1 }}.</span></td>
                <td>
                    <h6 class="m-0">{{ $trigger->citation }}</h6>
                    <ul class="d-flex gap-3 align-items-center">
                        <li>
                            <button type="button" class="btn p-0 border-0 btn-sm text-primary edit-trigger-btn"
                                data-id="{{ $trigger->id }}"
                                data-citation="{{ $trigger->citation }}"
                                data-industry="{{ $trigger->industry }}"
                                data-trigger="{{ $trigger->trigger }}"
                                data-outcome="{{ $trigger->outcome }}"
                                data-slug="{{ $trigger->slug }}"
                                data-bs-toggle="modal"
                                data-bs-target="#editAuditTriggerModal">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                        </li>
                        <li>
                            <button type="button" class="btn p-0 border-0 btn-sm text-danger delete-trigger-btn"
                                data-slug="{{ $trigger->slug }}"
                                data-citation="{{ $trigger->citation }}">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </li>
                    </ul>
                </td>
                <td>
                    <span class="status text-nowrap {{ $trigger->outcome ? 'success' : 'danger' }}">{{ $trigger->outcome ? 'Outcome added' : 'Outcome Missing' }}</span>
                </td>
                <td>
                    <p class="small fw-medium m-0">Published</p>
                    <span class="small text-nowrap text-muted">{{ $trigger->created_at->format('Y-m-d') }}</span>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="text-center py-4">
                    <p class="text-muted m-0">No audit triggers found</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Pagination --}}
<div class="bs-pagination">
    {{ $auditTriggers->links() }}
</div>
@endsection

<!-- Add Audit Trigger Modal -->
<div class="modal fade" id="addAuditTriggerModal" tabindex="-1" aria-labelledby="addAuditTriggerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAuditTriggerModalLabel">Add New Audit Trigger</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('AuditTrigger.Store') }}" method="POST" id="addTriggerForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="citation" class="form-label">Citation <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('citation') is-invalid @enderror" id="citation" name="citation" placeholder="e.g., IRC Section 469" required>
                        @error('citation')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="industry" class="form-label">Industry <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('industry') is-invalid @enderror" id="industry" name="industry" placeholder="e.g., Real Estate" required>
                        @error('industry')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="trigger" class="form-label">Trigger <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('trigger') is-invalid @enderror" id="trigger" name="trigger" rows="4" placeholder="Describe the audit trigger" required></textarea>
                        @error('trigger')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="outcome" class="form-label">Outcome <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('outcome') is-invalid @enderror" id="outcome" name="outcome" rows="4" placeholder="Describe the expected outcome" required></textarea>
                        @error('outcome')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create Trigger</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Audit Trigger Modal -->
<div class="modal fade" id="editAuditTriggerModal" tabindex="-1" aria-labelledby="editAuditTriggerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="editAuditTriggerModalLabel">Edit Audit Trigger</h5>
                    <p class="small text-muted m-0">{{'Update the legal parameters and expected outcomes of this trigger'}}</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editTriggerForm" method="POST">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6"></div>
                        <div class="col-lg-6"></div>
                    </div>
                    <div class="mb-3">
                        <label for="edit_citation" class="form-label">Citation <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_citation" name="citation" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_industry" class="form-label">Industry <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_industry" name="industry" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_trigger" class="form-label">Trigger <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="edit_trigger" name="trigger" rows="4" required></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="edit_outcome" class="form-label">Outcome <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="edit_outcome" name="outcome" rows="4" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update Trigger</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Edit trigger button click handler
        document.querySelectorAll('.edit-trigger-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const id = this.dataset.id;
                const citation = this.dataset.citation;
                const industry = this.dataset.industry;
                const trigger = this.dataset.trigger;
                const outcome = this.dataset.outcome;
                const slug = this.dataset.slug;

                // Populate edit form
                document.getElementById('edit_citation').value = citation;
                document.getElementById('edit_industry').value = industry;
                document.getElementById('edit_trigger').value = trigger;
                document.getElementById('edit_outcome').value = outcome;

                // Set form action
                const form = document.getElementById('editTriggerForm');
                form.action = `/admin/audit-triggers/${slug}`;
            });
        });

        // Delete trigger button click handler
        document.querySelectorAll('.delete-trigger-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const slug = this.dataset.slug;
                const citation = this.dataset.citation;

                if (confirm(`Are you sure you want to delete the trigger "${citation}"?`)) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `/admin/audit-triggers/${slug}`;
                    form.innerHTML = `
                    @csrf
                    @method('DELETE')
                `;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });
</script>
@endpush