@extends('layouts.app')

@section('title', 'Account Deletion Requests - Admin Panel')
@section('page_title', 'Deletion Requests')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
@endsection

@section('content')
<div class="row">
    <div class="col-md-12 col-xl-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Account Deletion Requests</h5>
            </div>
            <div class="card-body table-border-style">
                <div class="table-responsive">
                    <table id="deletionRequestsTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Status</th>
                                <th>Date Requested</th>
                                <th>Date Completed</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($requests as $request)
                            <tr>
                                <td>{{ $request->id }}</td>
                                <td>{{ $request->name ?? '-' }}</td>
                                <td>{{ $request->email }}</td>
                                <td>{{ $request->phone ?? '-' }}</td>
                                <td>
                                    @if($request->status == 'completed')
                                        <span class="badge badge-success">Completed</span>
                                    @else
                                        <span class="badge badge-warning">Pending</span>
                                    @endif
                                </td>
                                <td><x-date-display :date="$request->created_at" /></td>
                                <td>
                                    @if($request->completed_at)
                                        <x-date-display :date="$request->completed_at" />
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-info btn-sm view-details" data-id="{{ $request->id }}">
                                            <i class="feather icon-eye"></i> View
                                        </button>
                                        @if($request->status == 'pending')
                                            <button class="btn btn-danger btn-sm approve-deletion-btn" 
                                                    data-id="{{ $request->id }}" 
                                                    data-email="{{ $request->email }}"
                                                    data-name="{{ $request->name ?? 'User' }}">
                                                <i class="feather icon-check-circle"></i> Approve & Delete
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">Request Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><b>Name:</b> <span id="detName"></span></p>
                        <p><b>Email:</b> <span id="detEmail"></span></p>
                        <p><b>Phone:</b> <span id="detPhone"></span></p>
                    </div>
                    <div class="col-md-6">
                        <p><b>Status:</b> <span id="detStatus"></span></p>
                        <p><b>IP Address:</b> <span id="detIp"></span></p>
                        <p><b>OS/Platform:</b> <span id="detOs"></span></p>
                    </div>
                    <div class="col-12 mt-3">
                        <h6>Reason for deletion:</h6>
                        <div class="p-3 bg-light rounded" id="detReason"></div>
                    </div>
                    <div class="col-12 mt-3">
                        <h6>Metadata (User Agent):</h6>
                        <small class="text-muted" id="detDevice"></small>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Confirm Approval Modal -->
<div class="modal fade" id="confirmApprovalModal" tabindex="-1" role="dialog" aria-labelledby="confirmApprovalModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="approvalForm" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmApprovalModalLabel">Confirm Deletion Approval</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to approve the account deletion for <b id="approveTargetUser"></b> (<span id="approveTargetEmail"></span>)?</p>
                    <div class="alert alert-danger">
                        <strong>Warning!</strong> This will immediately soft-delete this user account and cascade soft-delete all associated palm profiles, reports, wallets, subscriptions, purchases, credit transactions, and referrals. This action can only be reversed manually via the Trash Bin.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Approve & Soft Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#deletionRequestsTable').DataTable({
            pageLength: 10,
            order: [[0, 'desc']],
            columnDefs: [{
                targets: [7],
                searchable: false,
                orderable: false
            }]
        });

        // View Details
        $(document).on('click', '.view-details', function() {
            var id = $(this).data('id');
            $.get("/dashboard/account-deletion-requests/" + id, function(data) {
                $('#detName').text(data.name || 'N/A');
                $('#detEmail').text(data.email);
                $('#detPhone').text(data.phone || 'N/A');
                $('#detStatus').html('<span class="badge ' + (data.status == 'completed' ? 'badge-success' : 'badge-warning') + '">' + data.status + '</span>');
                $('#detIp').text(data.ip_address || 'N/A');
                $('#detOs').text(data.os || 'N/A');
                $('#detReason').text(data.reason || 'No reason provided.');
                $('#detDevice').text(data.device || 'N/A');
                $('#detailsModal').modal('show');
            });
        });

        // Handle approval modal
        $(document).on('click', '.approve-deletion-btn', function() {
            var id = $(this).data('id');
            var email = $(this).data('email');
            var name = $(this).data('name');
            var url = "{{ route('account-deletion.admin-approve', ':id') }}".replace(':id', id);

            $('#approvalForm').attr('action', url);
            $('#approveTargetUser').text(name);
            $('#approveTargetEmail').text(email);
            $('#confirmApprovalModal').modal('show');
        });
    });
</script>
@endsection