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

@push('after-styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<style type="text/css">
    .profile-avatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #002868;
    }
    .profile-avatar-placeholder {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: #002868;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        color: #fff;
        font-weight: 700;
    }
    .stat-card {
        border-radius: 10px;
        padding: 20px;
        text-align: center;
    }
    .stat-card h2 { margin: 0 0 4px; font-size: 28px; font-weight: 700; }
    .stat-card .label-text { font-size: 13px; color: #666; }
    .info-row label { font-size: 11px; text-transform: uppercase; color: #999; letter-spacing: 1px; margin-bottom: 2px; display: block; }
    .info-row .val { font-size: 15px; font-weight: 600; color: #333; }
    .rewards-table th { background: #f5f5f5; }
    .badge-status-1 { background: #d4edda; color: #155724; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
    .badge-status-0 { background: #fff3cd; color: #856404; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
    .badge-status-3 { background: #f8d7da; color: #721c24; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
</style>
@endpush

@section('content')
@if(\Helper::canAccessModule('user_profile'))
<div class="padding edit-package">
    <div class="box">
        <div class="box-header m-b-2">
            <div class="box-header-left">
                <h3 class="d-block">{{ __('backend.showUserManagement') }}</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <a href="{{ route('end-user-management.index') }}">{{ __('backend.endUserManagement') }}</a> /
                    <span>{{ __('backend.showUserManagement') }}</span>
                </small>
            </div>
            <div class="box-header-right">
                <div class="box-tool">
                    <ul class="nav">
                        <li class="nav-item inline">
                            <a class="nav-link" href="{{ route('end-user-management.index') }}">
                                <i class="material-icons md-18">×</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="box-body">

            {{-- Profile Header --}}
            <div class="row m-b-2">
                <div class="col-sm-8">
                    <div class="d-flex" style="align-items:center; gap:20px;">
                        @if($endUserData->profile_image)
                            <img src="{{ asset('storage/'.$endUserData->profile_image) }}" class="profile-avatar" alt="Profile Photo">
                        @else
                            <div class="profile-avatar-placeholder">
                                {{ strtoupper(substr($endUserData->name ?? 'U', 0, 1)) }}
                            </div>
                        @endif
                        <div>
                            <h4 class="m-a-0 _700">{{ $endUserData->name }}</h4>
                            <div class="text-muted">{{ $endUserData->email }}</div>
                            <div class="m-t-xs">
                                @if($endUserData->status == 1)
                                    <span class="badge-status-1">Active</span>
                                @elseif($endUserData->status == 0)
                                    <span class="badge-status-0">Inactive</span>
                                @elseif($endUserData->status == 3)
                                    <span class="badge-status-3">Suspended</span>
                                @else
                                    <span class="badge-status-0">Deleted</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="stat-card bg-primary-lt">
                        <h2 class="text-primary">{{ number_format($total_points, 2) }}</h2>
                        <div class="label-text">Total Reward Points</div>
                    </div>
                </div>
            </div>

            @if($endUserData->status == 3 && $endUserData->suspension_reason)
            <div class="alert alert-danger m-b-2">
                <strong>Suspension Reason:</strong> {{ $endUserData->suspension_reason }}
            </div>
            @endif

            <hr>

            {{-- Personal Information --}}
            <h5 class="_600 m-b">User Profile Details</h5>
            <div class="row m-b-2">
                <div class="col-md-4 col-6 m-b info-row">
                    <label>User Name</label>
                    <div class="val">{{ $endUserData->name ?? '-' }}</div>
                </div>
                <div class="col-md-4 col-6 m-b info-row">
                    <label>Email Address</label>
                    <div class="val">{{ $endUserData->email ?? '-' }}</div>
                </div>
                <div class="col-md-4 col-6 m-b info-row">
                    <label>Phone</label>
                    <div class="val">{{ $endUserData->phone ?? '-' }}</div>
                </div>
                <div class="col-md-4 col-6 m-b info-row">
                    <label>Gender</label>
                    <div class="val">
                        @if($endUserData->gender == 1) Male
                        @elseif($endUserData->gender == 2) Female
                        @else -
                        @endif
                    </div>
                </div>
                <div class="col-md-4 col-6 m-b info-row">
                    <label>Country</label>
                    <div class="val">{{ $endUserData->country_name ?? '-' }}</div>
                </div>
                <div class="col-md-4 col-6 m-b info-row">
                    <label>State</label>
                    <div class="val">{{ $endUserData->state_name ?? '-' }}</div>
                </div>
                <div class="col-md-4 col-6 m-b info-row">
                    <label>Nationality</label>
                    <div class="val">{{ $endUserData->nationality ?? '-' }}</div>
                </div>
            </div>

            <hr>

            {{-- Rewards History --}}
            <h5 class="_600 m-b">User Rewards History</h5>
            <p class="text-muted small m-b">All rewards along with corresponding business names.</p>
            <div class="table-responsive m-b-2">
                <table class="table table-bordered rewards-table">
                    <thead>
                        <tr>
                            <th>Business Name</th>
                            <th class="text-right">Total Points</th>
                            <th class="text-center">
                                <label class="md-check m-a-0" style="font-weight: normal; cursor: pointer;">
                                    <input type="checkbox" id="filterRedeemed" class="has-value">
                                    <i class="primary"></i>
                                    Redeemed Only
                                </label>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rewards_history as $reward)
                            <tr>
                                <td><strong>{{ $reward->business_name }}</strong></td>
                                <td class="text-right text-primary _600">{{ number_format($reward->business_total_points, 2) }}</td>
                                <td class="text-center">
                                    <a href="javascript:void(0)" class="btn btn-xs info view-points-details"
                                       data-id="{{ $reward->business_owner_id }}"
                                       data-name="{{ $reward->business_name }}"
                                       data-user="{{ base64_decode($id) }}">View More</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center text-muted p-a-md">No rewards history found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Action Buttons --}}
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group m-t">
                        @if(\Helper::checkPermission('user_profile', 'active'))
                            @if($endUserData->status != 3)
                            <button type="button" class="btn danger p-x-md" id="suspendUserBtn">
                                Suspend User
                            </button>
                            @else
                            <button type="button" class="btn success p-x-md" id="unsuspendUserBtn">
                                Unsuspend User
                            </button>
                            @endif
                        @endif
                        <a href="{{ route('end-user-management.index') }}" class="border-btn">
                            {{ __('backend.cancel') }}
                        </a>
                    </div>
                </div>
            </div>

        </div>{{-- end box-body --}}
    </div>{{-- end box --}}
</div>

{{-- Points Details Modal --}}
<div id="pointsDetailsModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalBusinessName">Business Points History</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="pointsDetailsContent">
                    <div class="text-center p-a-md">
                        <i class="fa fa-spin fa-spinner fa-2x"></i>
                        <p>Loading history...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Suspend 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">
                <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
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script type="text/javascript">
    window.location.replace($('#redirect_url').val());
</script>
@endif
@endsection

@push('after-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.0/sweetalert2.all.min.js"></script>
<script>
    $(document).on('click', '.view-points-details', function() {
        const businessId = $(this).data('id');
        const businessName = $(this).data('name');
        const userId = $(this).data('user');

        $('#modalBusinessName').text(businessName + ' - Points History');
        $('#pointsDetailsModal').modal('show');
        $('#pointsDetailsContent').html('<div class="text-center p-a-md"><i class="fa fa-spin fa-spinner fa-2x"></i><p>Loading history...</p></div>');

        $.ajax({
            url: "{{ route('end-user-management.points-details') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                business_id: businessId,
                user_id: userId,
                filter: $('#filterRedeemed').is(':checked') ? 'redeemed' : 'all'
            },
            success: function(response) {
                $('#pointsDetailsContent').html(response);
            }
        });
    });

    $('#suspendUserBtn').on('click', function() {
        $('#suspendModal').modal('show');
    });

    $('#confirmSuspendBtn').on('click', function() {
        const reason = $('#suspensionReason').val().trim();
        if (!reason) {
            Swal.fire('Required', 'Please provide 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: "{{ base64_decode($id) }}",
                reason: reason
            },
            success: function(response) {
                Swal.fire('Suspended!', 'The user has been suspended successfully.', 'success').then(() => {
                    window.location.reload();
                });
            },
            error: function() {
                Swal.fire('Error', 'Something went wrong.', 'error');
                btn.prop('disabled', false).text('Confirm Suspension');
            }
        });
    });

    $('#unsuspendUserBtn').on('click', function() {
        Swal.fire({
            title: 'Unsuspend User?',
            text: 'This will restore the user\'s access.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#002868',
            confirmButtonText: 'Yes, Unsuspend'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('end-user-management.status_inactive') }}",
                    type: "POST",
                    data: { _token: "{{ csrf_token() }}", id: "{{ base64_decode($id) }}" },
                    success: function() {
                        Swal.fire('Done!', 'User has been unsuspended.', 'success').then(() => {
                            window.location.reload();
                        });
                    }
                });
            }
        });
    });
</script>
@endpush