@extends('dashboard.layouts.master')
@section('title', 'User Complaints | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
<style>
    .badge-pending  { background:#fff4e5; color:#e65100; padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600; }
    .badge-resolved { background:#e6f7ef; color:#2e7d32; padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600; }
    .category-pill  { background:#e8eaf6; color:#3949ab; padding:3px 9px; border-radius:10px; font-size:11px; font-weight:600; }
</style>
@endpush

@section('content')
    @if(\Helper::canAccessModule('user_complaints'))
<div class="padding">
    <div class="box">
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">User Complaints</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">Dashboard</a> / User Complaints
                </small>
            </div>
        </div>

        <div class="box-body">
            <div class="table-responsive">
                <table class="table table-striped b-t" id="complaintsTable">
                    <thead class="dker">
                        <tr>
                            <th>#</th>
                            <th>Complainant</th>
                            <th>Category</th>
                            <th>Reason</th>
                            <th>Status</th>
                            <th>Created At</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Suspend User Modal --}}
<div id="suspendModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Suspend User Account</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="suspendUserId">
                <div class="form-group">
                    <label class="form-control-label">Suspension Reason <span class="text-danger">*</span></label>
                    <textarea id="suspensionReason" class="form-control" rows="4"
                        placeholder="Enter mandatory reason for suspension..."></textarea>
                    <small class="text-muted">
                        Suspended users cannot: redeem offers, earn loyalty points, or initiate chats.
                    </small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn danger" id="confirmSuspendBtn">Confirm Suspension</button>
            </div>
        </div>
    </div>
</div>
    @else
        <script>window.location.href = "{{ route('adminHome') }}";</script>
    @endif
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.0/sweetalert2.all.min.js"></script>
<script>
    const table = $('#complaintsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('complaints.anyData') }}",
            type: 'POST',
            data: { _token: "{{ csrf_token() }}" }
        },
        columns: [
            { data: 'id',          name: 'id' },
            { data: 'complainant', name: 'complainant' },
            { data: 'category',    name: 'category' },
            { data: 'reason',      name: 'reason' },
            { data: 'status',      name: 'status' },
            { data: 'created_at',  name: 'created_at' },
            { data: 'options',     name: 'options', orderable: false, searchable: false, className: 'text-center' }
        ],
        order: [[0, 'DESC']]
    });

    // Resolve complaint
    $(document).on('click', '.resolve-complaint', function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Resolve Complaint?',
            text: 'Are you sure you want to mark this complaint as resolved?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#002868',
            confirmButtonText: 'Yes, Resolve'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('complaints.resolve') }}",
                    type: 'POST',
                    data: { _token: "{{ csrf_token() }}", id: id },
                    success: function() {
                        Swal.fire('Resolved!', 'Complaint marked as resolved.', 'success');
                        table.ajax.reload();
                    }
                });
            }
        });
    });

    // Open suspend modal
    $(document).on('click', '.suspend-user-btn', function() {
        $('#suspendUserId').val($(this).data('user-id'));
        $('#suspensionReason').val('');
        $('#suspendModal').modal('show');
    });

    // Confirm suspension
    $('#confirmSuspendBtn').on('click', function() {
        const reason = $('#suspensionReason').val().trim();
        if (!reason) {
            Swal.fire('Required', 'Please enter a suspension reason.', 'warning');
            return;
        }
        const btn = $(this);
        btn.prop('disabled', true).text('Processing...');

        $.ajax({
            url: "{{ route('users.suspend') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                id: $('#suspendUserId').val(),
                reason: reason
            },
            success: function(response) {
                $('#suspendModal').modal('hide');
                Swal.fire('Suspended!', 'User has been suspended and notified.', 'success');
                table.ajax.reload();
                btn.prop('disabled', false).text('Confirm Suspension');
            },
            error: function() {
                Swal.fire('Error', 'Something went wrong.', 'error');
                btn.prop('disabled', false).text('Confirm Suspension');
            }
        });
    });

    // Delete user
    $(document).on('click', '.delete-user-btn', function() {
        const userId = $(this).data('user-id');
        Swal.fire({
            title: 'Delete User?',
            text: 'Are you sure you want to delete this user? This action is irreversible.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Yes, Delete'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('users.delete') }}",
                    type: 'POST',
                    data: { _token: "{{ csrf_token() }}", id: userId },
                    success: function() {
                        Swal.fire('Deleted!', 'User has been deleted.', 'success');
                        table.ajax.reload();
                    }
                });
            }
        });
    });
</script>
@endpush