@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{!! $variables['judul'] !!}</h3>
                        <div class="float-right">
                            <a href="{{ route('claims.index') }}"><button class="btn btn-secondary">List</button></a>
                            @if($data->isPending())
                                <button class="btn btn-success" onclick="approveClaim({{ $data->id }})">Approve</button>
                                <button class="btn btn-danger" onclick="rejectClaim({{ $data->id }})">Reject</button>
                                <button class="btn btn-info" onclick="processAuto({{ $data->id }})">Process Auto</button>
                            @endif
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <table class="table table-striped">
                                    <tr>
                                        <th width="20%">IMEI</th>
                                        <td width="30%">{{ $data->imei }}</td>
                                    </tr>
                                    <tr>
                                        <th>User</th>
                                        <td>{{ $data->endUser ? $data->endUser->full_name : '-' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Promotion</th>
                                        <td>
                                            @if($data->promotion)
                                                <a href="{{ route('promotions.show', $data->promotion->id) }}">{{ $data->promotion->name }}</a>
                                                <br><small class="text-muted">{{ ucwords(str_replace('_', ' ', $data->promotion->reward_method)) }}</small>
                                            @else
                                                -
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Device Model</th>
                                        <td>{{ $data->deviceModel ? $data->deviceModel->full_name : '-' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Status</th>
                                        <td>{!! $data->status_badge !!}</td>
                                    </tr>
                                    <tr>
                                        <th>Outlet</th>
                                        <td>
                                            @if($data->outlet)
                                                {{ $data->outlet->outlet_name }}
                                                <br><small class="text-muted">QR: {{ $data->outlet_qr_code }}</small>
                                            @else
                                                {{ $data->outlet_qr_code ?: '-' }}
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Lottery Number</th>
                                        <td>{{ $data->lottery_number ?: '-' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Points Awarded</th>
                                        <td>{{ $data->points_awarded ? $data->formatted_points : '-' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Claimed At</th>
                                        <td>{{ $data->claimed_at ? $data->claimed_at->format('d/m/Y H:i:s') : '-' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Processed At</th>
                                        <td>{{ $data->processed_at ? $data->processed_at->format('d/m/Y H:i:s') : '-' }}</td>
                                    </tr>
                                    @if($data->rejection_reason)
                                    <tr>
                                        <th>Rejection Reason</th>
                                        <td class="text-danger">{{ $data->rejection_reason }}</td>
                                    </tr>
                                    @endif
                                </table>
                            </div>
                            <div class="col-md-4">
                                <div class="card card-outline card-info">
                                    <div class="card-header">
                                        <h3 class="card-title">Reward Information</h3>
                                    </div>
                                    <div class="card-body">
                                        <p><strong>Reward Description:</strong><br>{{ $data->reward_description }}</p>
                                    </div>
                                </div>

                                @if($data->promotion)
                                <div class="card card-outline card-secondary">
                                    <div class="card-header">
                                        <h3 class="card-title">Promotion Details</h3>
                                    </div>
                                    <div class="card-body">
                                        <p><strong>Method:</strong> {!! $data->promotion->method_badge !!}</p>
                                        <p><strong>Period:</strong><br>{{ $data->promotion->start_date->format('d/m/Y') }} - {{ $data->promotion->end_date->format('d/m/Y') }}</p>
                                        <p><strong>Status:</strong> {!! $data->promotion->status_badge !!}</p>
                                        <p><strong>Max Claims:</strong> {{ $data->promotion->max_claims_per_user }} per user</p>
                                        
                                        @if($data->promotion->reward_method === 'point_reward' && isset($data->promotion->configuration['point_value']))
                                        <p><strong>Point Value:</strong> Rp {{ number_format($data->promotion->configuration['point_value'], 0, ',', '.') }} per point</p>
                                        @endif
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>

                        @if($data->endUser)
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="card card-outline card-primary">
                                    <div class="card-header">
                                        <h3 class="card-title">User Claim History</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-sm btn-info" onclick="loadUserHistory()">
                                                <i class="fas fa-refresh"></i> Refresh
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="user-history-content">
                                            <p class="text-muted">Loading...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Approve Modal -->
<div class="modal fade" id="approveModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Approve Claim</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to approve this claim?</p>
                <form id="approve-form">
                    <div class="form-group">
                        <label>Additional Reward Data (Optional)</label>
                        <textarea name="reward_data" class="form-control" rows="3" placeholder="JSON format for additional reward data"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" onclick="confirmApprove()">Approve</button>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Claim</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="reject-form">
                    <div class="form-group">
                        <label>Rejection Reason *</label>
                        <textarea name="rejection_reason" class="form-control" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="confirmReject()">Reject</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    window.approveClaim = function(claimId) {
        $('#approveModal').modal('show');
    };

    window.rejectClaim = function(claimId) {
        $('#rejectModal').modal('show');
    };

    window.processAuto = function(claimId) {
        if (confirm('Are you sure you want to process this claim automatically?')) {
            $.post('{{ route("claims.process-auto", $data->id) }}', {
                _token: '{{ csrf_token() }}'
            }).done(function(response) {
                if (response.success) {
                    alert(response.message);
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                }
            });
        }
    };

    window.confirmApprove = function() {
        const rewardData = $('textarea[name="reward_data"]').val();
        
        $.post('{{ route("claims.approve", $data->id) }}', {
            reward_data: rewardData ? JSON.parse(rewardData) : null,
            _token: '{{ csrf_token() }}'
        }).done(function(response) {
            if (response.success) {
                alert(response.message);
                location.reload();
            } else {
                alert('Error: ' + response.message);
            }
        });
    };

    window.confirmReject = function() {
        const reason = $('#reject-form textarea[name="rejection_reason"]').val();
        
        if (!reason) {
            alert('Rejection reason is required');
            return;
        }
        
        $.post('{{ route("claims.reject", $data->id) }}', {
            rejection_reason: reason,
            _token: '{{ csrf_token() }}'
        }).done(function(response) {
            if (response.success) {
                alert(response.message);
                location.reload();
            } else {
                alert('Error: ' + response.message);
            }
        });
    };

    window.loadUserHistory = function() {
        $('#user-history-content').html('<p class="text-muted">Loading...</p>');
        
        $.get('{{ route("claims.user-history") }}', {
            user_id: {{ $data->end_user_id }},
            promotion_id: {{ $data->promotion_id ?? 'null' }}
        }).done(function(data) {
            if (data.length === 0) {
                $('#user-history-content').html('<p class="text-muted">No claim history found</p>');
                return;
            }
            
            let html = '<div class="table-responsive"><table class="table table-sm table-bordered">';
            html += '<thead><tr><th>IMEI</th><th>Promotion</th><th>Status</th><th>Reward</th><th>Date</th></tr></thead><tbody>';
            
            data.forEach(function(claim) {
                html += '<tr>';
                html += '<td>' + claim.imei + '</td>';
                html += '<td>' + (claim.promotion ? claim.promotion.name : '-') + '</td>';
                html += '<td>' + claim.status + '</td>';
                html += '<td>' + (claim.reward_description || '-') + '</td>';
                html += '<td>' + (claim.claimed_at ? new Date(claim.claimed_at).toLocaleDateString() : '-') + '</td>';
                html += '</tr>';
            });
            
            html += '</tbody></table></div>';
            $('#user-history-content').html(html);
        });
    };

    // Auto-load saat halaman dibuka
    loadUserHistory();
});
</script>
@endsection