@extends('dashboard.layouts.master')
@section('title', 'Log Detail | 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>
    .detail-card { border-radius: 8px; border: 1px solid #e8ecf0; background: #fff; margin-bottom: 20px; overflow: hidden; }
    .detail-card .card-head { background: #f5f7fa; padding: 14px 20px; border-bottom: 1px solid #e8ecf0; display: flex; align-items: center; gap: 10px; }
    .detail-card .card-head h5 { margin: 0; font-size: 14px; font-weight: 700; color: #333; }
    .detail-card .card-body { padding: 0; }
    .detail-card table.info-table { width: 100%; border-collapse: collapse; }
    .detail-card table.info-table tr { border-bottom: 1px solid #f0f0f0; }
    .detail-card table.info-table tr:last-child { border-bottom: none; }
    .detail-card table.info-table td { padding: 11px 20px; font-size: 13px; vertical-align: middle; }
    .detail-card table.info-table td:first-child { width: 160px; color: #777; font-weight: 600; }
    .detail-card table.info-table td:last-child { color: #222; }

    .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
    .badge-success  { background: #d4edda; color: #155724; }
    .badge-danger   { background: #f8d7da; color: #721c24; }
    .badge-info     { background: #cce5ff; color: #004085; }
    .badge-secondary{ background: #e2e3e5; color: #383d41; }
    .font-weight-bold { font-weight: 700 !important; }

    /* Integrity lock banner */
    .integrity-lock {
        display: flex; align-items: flex-start; gap: 10px;
        background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px;
        padding: 12px 16px; margin-bottom: 20px; font-size: 13px; color: #856404;
    }
    .integrity-lock i { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

    /* Correction modal styles */
    .correction-form label { font-weight: 600; font-size: 13px; }
    .pts-sign { display: flex; gap: 0; }
    .pts-sign .btn { border-radius: 0; }
    .pts-sign .btn:first-child { border-radius: 4px 0 0 4px; }
    .pts-sign .btn:last-child  { border-radius: 0 4px 4px 0; }
    .pts-sign .btn.active { box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }

    /* Audit trail */
    .audit-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
    .audit-row:last-child { border-bottom: none; }
    .audit-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .audit-icon.correction { background: #cce5ff; color: #004085; }
    .audit-meta { font-size: 12px; color: #888; }
    .audit-justification { font-size: 13px; color: #333; margin-top: 2px; }
    .correction-pts-pos { color: #155724; font-weight: 700; }
    .correction-pts-neg { color: #721c24; font-weight: 700; }
</style>
@endpush

@section('content')
@can('offer.qr_logs.read')

<div class="padding">

    {{-- ── Page Header ── --}}
    <div class="box-header m-b-2" style="padding:0 0 12px 0;">
        <div class="box-header-left">
            <h3 class="d-block">Log Detail</h3>
            <small class="d-inline-block">
                <a href="{{ route('adminHome') }}">Dashboard</a> /
                <a href="{{ route('offer-management.index') }}">Offer Management</a> /
                <a href="{{ route('log-management.index') }}">QR &amp; Reward Logs</a> /
                <span>{{ $logData->display_type }} #{{ $logData->id }}</span>
            </small>
        </div>
        <div style="margin-top:10px;">
            <a href="{{ route('log-management.index') }}" class="btn white btn-sm">
                <i class="material-icons md-14" style="vertical-align:middle;">arrow_back</i> Back to Logs
            </a>
            @can('offer.qr_logs.update')
                @if($type !== 'Correction')
                <button class="btn btn-sm" style="background:#002868;color:#fff;margin-left:8px;" data-toggle="modal" data-target="#correctionModal">
                    <i class="material-icons md-14" style="vertical-align:middle;">tune</i> Apply Point Correction
                </button>
                @endif
            @endcan
        </div>
    </div>

    {{-- ── Integrity Lock Banner ── --}}
    <div class="integrity-lock">
        <i class="material-icons">lock</i>
        <div>
            <strong>Loyalty Integrity Rule:</strong>
            The original points record below is <em>immutable</em>. Any adjustment must be submitted as an exceptional correction with a mandatory justification — it will be permanently recorded in the audit log.
        </div>
    </div>

    <div class="row">

        {{-- ── Event Information ── --}}
        <div class="col-sm-6">
            <div class="detail-card">
                <div class="card-head">
                    <i class="material-icons" style="color:#002868;">event_note</i>
                    <h5>Event Information</h5>
                </div>
                <div class="card-body">
                    <table class="info-table">
                        <tr>
                            <td>Log ID</td>
                            <td><strong>#{{ $logData->id }}</strong></td>
                        </tr>
                        <tr>
                            <td>Event Type</td>
                            <td>
                                @if($type === 'Earn')
                                    <span class="badge badge-success">QR Scan (Earn)</span>
                                @elseif($type === 'Redeem')
                                    <span class="badge badge-danger">Reward (Redeem)</span>
                                @else
                                    <span class="badge badge-info">Point Correction</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td>Points</td>
                            <td>
                                <span class="{{ $type === 'Earn' || ($type === 'Correction' && $logData->points >= 0) ? 'text-success' : 'text-danger' }} font-weight-bold" style="font-size:16px;">
                                    {{ $logData->display_points }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>Date &amp; Time</td>
                            <td>{{ \Carbon\Carbon::parse($logData->display_date)->format('d M Y, H:i:s') }}</td>
                        </tr>
                        @if($type === 'Redeem')
                        <tr>
                            <td>Reward Name</td>
                            <td>{{ $logData->reward_info ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td>Status</td>
                            <td>
                                @if($logData->status == 1)
                                    <span class="badge badge-success">Valid</span>
                                @else
                                    <span class="badge badge-danger">Cancelled</span>
                                @endif
                            </td>
                        </tr>
                        @endif
                        @if($type === 'Correction')
                        <tr>
                            <td>Justification</td>
                            <td>{{ $logData->justification }}</td>
                        </tr>
                        <tr>
                            <td>Applied By</td>
                            <td>{{ $logData->admin->name ?? 'N/A' }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
        </div>

        {{-- ── User & Business ── --}}
        <div class="col-sm-6">
            <div class="detail-card">
                <div class="card-head">
                    <i class="material-icons" style="color:#002868;">people</i>
                    <h5>User &amp; Business</h5>
                </div>
                <div class="card-body">
                    <table class="info-table">
                        <tr>
                            <td>Customer</td>
                            <td>
                                {{ $logData->user->name ?? 'N/A' }}
                                <span class="text-muted" style="font-size:11px;">(ID #{{ $logData->user_id }})</span>
                            </td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td>{{ $logData->user->email ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td>Business</td>
                            <td>
                                {{ $logData->business->business_name ?? 'N/A' }}
                                <span class="text-muted" style="font-size:11px;">(ID #{{ $logData->business_id }})</span>
                            </td>
                        </tr>
                        <tr>
                            <td>Business Email</td>
                            <td>{{ $logData->business->business_email ?? 'N/A' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    </div>

    {{-- ── Corrections Applied to This Record ── --}}
    @if($type !== 'Correction' && count($corrections) > 0)
    <div class="detail-card">
        <div class="card-head">
            <i class="material-icons" style="color:#004085;">history</i>
            <h5>Corrections Applied to This Record ({{ count($corrections) }})</h5>
        </div>
        <div class="card-body" style="padding: 4px 20px;">
            @foreach($corrections as $c)
            <div class="audit-row">
                <div class="audit-icon correction">
                    <i class="material-icons" style="font-size:18px;">tune</i>
                </div>
                <div style="flex:1;">
                    <div class="audit-meta">
                        Correction #{{ $c->id }} &nbsp;&bull;&nbsp;
                        {{ \Carbon\Carbon::parse($c->created_at)->format('d M Y, H:i:s') }} &nbsp;&bull;&nbsp;
                        By: <strong>{{ $c->admin->name ?? 'N/A' }}</strong>
                    </div>
                    <div class="audit-justification">
                        <span class="{{ $c->points >= 0 ? 'correction-pts-pos' : 'correction-pts-neg' }}">
                            {{ $c->points >= 0 ? '+' : '' }}{{ $c->points }} pts
                        </span>
                        &mdash; {{ $c->justification }}
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- ── Full Reward Redemption History for This User ── --}}
    @if($type !== 'Correction')
    <div class="detail-card">
        <div class="card-head">
            <i class="material-icons" style="color:#002868;">redeem</i>
            <h5>Full Reward Redemption History &mdash; {{ $logData->user->name ?? 'User #'.$logData->user_id }}</h5>
        </div>
        <div class="card-body" style="padding: 16px;">
            <table class="table table-bordered m-a-0" id="redemptionHistoryTable">
                <thead>
                    <tr>
                        <th style="display:none;">ID</th>
                        <th>Reward Name</th>
                        <th>Points Used</th>
                        <th>Business</th>
                        <th>Date &amp; Time</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    @endif

</div><!-- /padding -->

{{-- ── Point Correction Modal ── --}}
@can('offer.qr_logs.update')
    @if($type !== 'Correction')
<div class="modal fade" id="correctionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#002868;color:#fff;">
                <h5 class="modal-title" style="color:#fff;">
                    <i class="material-icons md-16" style="vertical-align:middle;">tune</i>
                    Apply Exceptional Point Correction
                </h5>
                <button type="button" class="close" data-dismiss="modal" style="color:#fff;">&times;</button>
            </div>
            <div class="modal-body correction-form">
                <div class="alert alert-warning" style="font-size:12px;padding:8px 12px;">
                    <i class="material-icons md-14" style="vertical-align:middle;">warning</i>
                    <strong>Loyalty Integrity:</strong> The original record will not be altered.
                    This correction is logged permanently in the audit trail.
                </div>

                <div class="form-group">
                    <label>Direction</label>
                    <div class="pts-sign">
                        <button type="button" class="btn btn-sm success active" id="btnCredit" onclick="setSign(1)">
                            <i class="material-icons md-14" style="vertical-align:middle;">add</i> Credit (Award Points)
                        </button>
                        <button type="button" class="btn btn-sm danger" id="btnDebit" onclick="setSign(-1)">
                            <i class="material-icons md-14" style="vertical-align:middle;">remove</i> Debit (Deduct Points)
                        </button>
                    </div>
                    <input type="hidden" id="corrSign" value="1">
                </div>

                <div class="form-group">
                    <label>Points Value <span class="text-danger">*</span></label>
                    <input type="number" id="corrPoints" class="form-control" min="1" placeholder="e.g. 50">
                </div>

                <div class="form-group">
                    <label>Admin Justification <span class="text-danger">*</span></label>
                    <textarea id="corrJustification" class="form-control" rows="4"
                        placeholder="Describe why this correction is necessary (required for audit log)..."></textarea>
                    <small class="text-muted">This text will appear verbatim in the audit log.</small>
                </div>

                <div id="corrMsg"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn white" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn" style="background:#002868;color:#fff;" onclick="submitCorrection()">
                    <i class="material-icons md-14" style="vertical-align:middle;">save</i> Submit &amp; Log
                </button>
            </div>
        </div>
    </div>
</div>
    @endif
@endcan

@else
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script>window.location.replace(document.getElementById('redirect_url').value);</script>
@endcan
@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>
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

@if($type !== 'Correction')
// ── Redemption History Table ──
$('#redemptionHistoryTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('log-management.userRedemptionData', ['userId' => base64_encode($logData->user_id)]) }}",
        type: 'POST'
    },
    columns: [
        { data: 'id',            name: 'id',             visible: false },
        { data: 'reward_name',   name: 'reward_name' },
        { data: 'points_used',   name: 'points_used' },
        { data: 'business_name', name: 'business_name' },
        { data: 'date',          name: 'redemption_date' }
    ],
    order: [[0, 'desc']],
    language: { search: 'Search reward or business:' }
});
@endif

// ── Point Correction Modal ──
let corrSign = 1;
function setSign(s) {
    corrSign = s;
    $('#corrSign').val(s);
    if (s === 1) {
        $('#btnCredit').addClass('active');
        $('#btnDebit').removeClass('active');
    } else {
        $('#btnDebit').addClass('active');
        $('#btnCredit').removeClass('active');
    }
}

function submitCorrection() {
    const pts  = parseInt($('#corrPoints').val());
    const just = $('#corrJustification').val().trim();

    if (!pts || pts <= 0) {
        showCorrMsg('danger', 'Please enter a valid points value (greater than 0).');
        return;
    }
    if (!just) {
        showCorrMsg('danger', 'Justification is required.');
        return;
    }

    $.post("{{ route('log-management.pointCorrection') }}", {
        _token:         "{{ csrf_token() }}",
        points:         corrSign * pts,
        justification:  just,
        user_id:        {{ $logData->user_id }},
        business_id:    {{ $logData->business_id }},
        reference_type: '{{ $type === "Earn" ? "qr_scan_log" : "reward_redemption" }}',
        reference_id:   {{ $logData->id }}
    }, function(data) {
        if (data.success) {
            $('#correctionModal').modal('hide');
            Swal.fire({
                icon: 'success',
                title: 'Correction Applied',
                text: data.msg,
                confirmButtonColor: '#002868'
            }).then(function() {
                location.reload();
            });
        } else {
            showCorrMsg('danger', data.msg);
        }
    }).fail(function() {
        showCorrMsg('danger', 'Request failed. Please try again.');
    });
}

function showCorrMsg(type, msg) {
    $('#corrMsg').html('<div class="alert alert-' + type + ' m-t-xs" style="font-size:13px;">' + msg + '</div>');
}

$('#correctionModal').on('hidden.bs.modal', function() {
    $('#corrMsg').html('');
    $('#corrPoints').val('');
    $('#corrJustification').val('');
    setSign(1);
});
</script>
@endpush