@extends('layouts.app')

@section('content')
<div class="app-content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6"><h3 class="mb-0">User Management</h3></div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Users</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="app-content">
    <div class="container-fluid">
        <div class="card mt-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title">System Users</h3>
                <div class="card-tools ms-auto d-flex">
                    <form action="{{ route('admin.users.index') }}" method="GET" class="me-2">
                        <div class="input-group input-group-sm" style="width: 250px;">
                            <input type="text" name="keyword" class="form-control" placeholder="Search users..." value="{{ request('keyword') }}">
                            <button type="submit" class="btn btn-default"><i class="bi bi-search"></i></button>
                        </div>
                    </form>
                    @if(auth('admin')->user()?->can('create users'))
<a href="{{ route('admin.users.create') }}" class="btn btn-primary btn-sm">Add New User</a>
@endif
                </div>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover table-striped mb-0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Image</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th>Bonus Balance</th>
                            <th>Date of Birth</th>
                            <th>Created At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($items as $item)
                        <tr>
                            <td>{{ $item->id }}</td>
                            <td>
                                @if($item->image)
                                    <img src="{{ asset('storage/' . $item->image) }}" class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">
                                @else
                                    <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; color: white;">
                                        {{ strtoupper(substr($item->name, 0, 1)) }}
                                    </div>
                                @endif
                            </td>
                            <td>{{ $item->name }}</td>
                            <td>{{ $item->email }}</td>
                            <td>
                                @if($item->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge {{ $item->date_of_birth && $item->date_of_birth->isBirthday() ? 'bg-danger text-white' : 'bg-light text-dark border' }}">
                                    {{ $item->date_of_birth ? $item->date_of_birth->format('Y-m-d') : 'N/A' }}
                                    @if($item->date_of_birth && $item->date_of_birth->isBirthday())
                                        <i class="bi bi-gift ms-1"></i>
                                    @endif
                                </span>
                            </td>
                            <td>{{ $item->created_at->format('Y-m-d') }}</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-warning" onclick="openBonusModal(this)" data-user-id="{{ $item->id }}" data-user-name="{{ e($item->name) }}" data-user-balance="{{ $item->bonus_balance ?? 0 }}" title="Bonus Points">
                                        <i class="bi bi-gift"></i>
                                    </button>
                                    @if(auth('admin')->user()?->can('update users'))
<a href="{{ route('admin.users.edit', $item->id) }}" class="btn btn-sm btn-outline-info"><i class="bi bi-pencil"></i></a>
@endif
                                    @if(auth('admin')->user()?->can('delete users'))
<form action="{{ route('admin.users.destroy', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this user?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                    </form>
@endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-4">No users found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="card-footer clearfix">
                <div class="float-end">
                    {{ $items->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .reward-system-wrapper {
        position: relative;
        padding: 50px 20px 30px; /* Reduced from 100px 20px 60px */
        margin-bottom: 5px; /* Reduced from 20px */
    }
    .main-progress-track {
        height: 10px;
        background-color: #f1f3f5;
        border-radius: 20px;
        position: relative;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }
    .main-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
        border-radius: 20px;
        width: 0%;
        transition: width 1.2s ease-in-out;
        position: relative;
    }
    .reward-pod {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        text-align: center;
        width: 80px;
    }
    /* Image is now the node - centered ON the bar */
    .pod-img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #e9ecef; /* Changed from #fff */
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        background-color: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .reward-pod.reached .pod-img {
        border-color: #1e3c72;
        box-shadow: 0 0 15px rgba(30, 60, 114, 0.3);
    }
    .reward-pod.not-reached .pod-img {
        filter: grayscale(1);
        opacity: 0.8;
    }
    .reward-pod:hover .pod-img {
        transform: scale(1.15);
        z-index: 20;
    }
    /* Info Box - SHOWN ON HOVER ONLY */
    .pod-info {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(0px);
        background: #fff;
        padding: 4px 10px; /* Reduced padding */
        border-radius: 6px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        margin-bottom: 12px;
        pointer-events: none;
        border: 1px solid #ddd;
        min-width: 80px; /* Reduced min-width */
    }
    .reward-pod:hover .pod-info {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-5px);
    }
    .pod-name {
        font-size: 13px; /* Increased from 11px */
        font-weight: 700;
        color: #1e3c72;
        margin-bottom: 2px;
        display: block;
        white-space: nowrap;
    }
    .pod-pts-label {
        font-size: 11px; /* Increased from 10px */
        color: #333;
        background: #fff9db;
        padding: 0px 8px;
        border-radius: 4px;
        font-weight: 800;
        border: 1px solid #fab005;
        display: inline-block;
    }
    .pod-info::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fff;
    }
    /* Current Points Indicator on the Bar Tip */
    .bar-tip-label {
        position: absolute;
        right: 0;
        top: -30px;
        transform: translateX(50%);
        background: #1e3c72;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 4px;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        z-index: 30;
    }
    .bar-tip-label::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #1e3c72;
    }
</style>
@endpush

@push('scripts')
<div class="modal fade" id="bonusModal" tabindex="-1" aria-labelledby="bonusModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="bonusModalLabel">Bonus & Redemption</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-0">
                <!-- Reward System Structure -->
                <div class="reward-system-wrapper" id="rewardSystemContainer">
                    <div class="main-progress-track" id="rewardProgressTrack">
                        <div class="main-progress-fill" id="rewardProgressFill">
                            <div class="bar-tip-label">0</div>
                        </div>
                        <div id="rewardMilestonesContainer"></div>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-bottom">
                    <div>
                        <h4 class="mb-0 text-primary" id="bonusUserName">User Name</h4>
                        <span class="text-muted">Current Balance: <strong id="bonusUserBalance">0.00</strong></span>
                    </div>
                    <div>
                        <button class="btn btn-primary shadow-sm rounded-pill" type="button" data-bs-toggle="collapse" data-bs-target="#redeemFormCollapse" aria-expanded="false" aria-controls="redeemFormCollapse">
                            <i class="bi bi-gift-fill me-1"></i> Redeem Points
                        </button>
                    </div>
                </div>

                <div class="collapse mb-4" id="redeemFormCollapse">
                    <div class="card card-body bg-light border-warning">
                        <form action="{{ route('admin.bonus-redeems.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="user_id" id="redeemUserId">
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <label class="form-label">Points to Redeem</label>
                                    <input type="number" step="0.01" min="0.01" name="points_redeemed" id="points_redeemed" class="form-control" required>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label class="form-label">Remarks</label>
                                    <input type="text" name="remarks" class="form-control">
                                </div>
                                <div class="col-12 mt-2">
                                    <button type="submit" class="btn btn-warning w-100 fw-bold">Submit Redemption</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div id="bonusHistoryContent">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const pointRewards = @json($pointRewards);

    function openBonusModal(btn) {
        let userId = btn.getAttribute('data-user-id');
        let userName = btn.getAttribute('data-user-name');
        let balance = btn.getAttribute('data-user-balance');
        
        document.getElementById('bonusUserName').innerText = userName;
        document.getElementById('bonusUserBalance').innerText = parseFloat(balance).toFixed(2);
        document.getElementById('redeemUserId').value = userId;
        document.getElementById('points_redeemed').max = balance;
        
        // --- Reward System Logic ---
        const track = document.getElementById('rewardProgressTrack');
        const container = document.getElementById('rewardMilestonesContainer');
        const fill = document.getElementById('rewardProgressFill');
        container.innerHTML = '';
        
        if (pointRewards.length > 0) {
            const lastRewardPoints = pointRewards[pointRewards.length - 1].points;
            const maxPoints = Math.max(lastRewardPoints, balance);
            const progressPercent = Math.min((balance / maxPoints) * 100, 100);
            
            setTimeout(() => { fill.style.width = progressPercent + '%'; }, 100);

            // --- POINT INDICATOR ON BAR TIP ---
            fill.innerHTML = `<div class="bar-tip-label">${balance}</div>`;
            // ----------------------------------
            
            pointRewards.forEach(reward => {
                const position = (reward.points / maxPoints) * 100;
                const isReached = balance >= reward.points;
                const photoUrl = reward.photo ? `/storage/${reward.photo}` : null;
                
                const pod = document.createElement('div');
                pod.className = `reward-pod ${isReached ? 'reached' : 'not-reached'}`;
                pod.style.left = position + '%';
                
                let imgHtml = photoUrl ? `<img src="${photoUrl}" class="pod-img">` : `<div class="pod-img d-flex align-items-center justify-content-center text-secondary bg-light"><i class="bi bi-star-fill" style="font-size: 20px;"></i></div>`;
                
                pod.innerHTML = `
                    <div class="pod-info">
                        <span class="pod-name">${reward.reward}</span>
                        <span class="pod-pts-label">${reward.points} Pts</span>
                    </div>
                    ${imgHtml}
                `;
                container.appendChild(pod);
            });
        } else {
            fill.style.width = '0%';
        }
        // --- End Logic ---

        let collapseEl = document.getElementById('redeemFormCollapse');
        let bsCollapse = bootstrap.Collapse.getInstance(collapseEl);
        if(bsCollapse) bsCollapse.hide();
        
        document.getElementById('bonusHistoryContent').innerHTML = '<div class="text-center py-4"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
        
        let modal = new bootstrap.Modal(document.getElementById('bonusModal'));
        modal.show();

        fetch(`/admin/users/${userId}/bonus-history`)
            .then(res => res.text())
            .then(html => {
                document.getElementById('bonusHistoryContent').innerHTML = html;
            })
            .catch(err => {
                document.getElementById('bonusHistoryContent').innerHTML = '<div class="alert alert-danger">Failed to load history.</div>';
            });
    }
</script>
@endpush
@endsection