@extends('layouts.base_view')

@section('content')
<section class="content">
    <div class="container-fluid">

        {{-- Summary Cards --}}
        <div class="row mb-3">
            <div class="col-md-3">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>{{ number_format($summary['total_earned'], 0, ',', '.') }}</h3>
                        <p>Total Poin Diperoleh</p>
                    </div>
                    <div class="icon"><i class="fas fa-plus-circle"></i></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{ number_format($summary['total_redeemed'], 0, ',', '.') }}</h3>
                        <p>Total Poin Ditukar</p>
                    </div>
                    <div class="icon"><i class="fas fa-exchange-alt"></i></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="small-box bg-secondary">
                    <div class="inner">
                        <h3>{{ number_format($summary['total_expired'], 0, ',', '.') }}</h3>
                        <p>Total Poin Kadaluarsa</p>
                    </div>
                    <div class="icon"><i class="fas fa-clock"></i></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{ number_format($summary['current_balance'], 0, ',', '.') }}</h3>
                        <p>Saldo Poin Saat Ini</p>
                    </div>
                    <div class="icon"><i class="fas fa-star"></i></div>
                </div>
            </div>
        </div>

        {{-- User Info + Adjust --}}
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title">{{ $endUser->full_name }} &mdash; {{ $endUser->phone }}</h3>
                <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#adjustModal">
                    <i class="fas fa-sliders-h mr-1"></i> Sesuaikan Poin
                </button>
            </div>
            <div class="card-body">
                {{-- Filter --}}
                <div class="row mb-3">
                    <div class="col-md-3">
                        <select id="filterType" class="form-control">
                            <option value="">Semua Tipe</option>
                            @foreach($types as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button id="btnFilter" class="btn btn-primary"><i class="fas fa-search"></i> Filter</button>
                    </div>
                </div>

                <table id="historyTable" class="table table-bordered table-hover w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Tipe</th>
                            <th>Poin</th>
                            <th>Keterangan</th>
                            <th>Kadaluarsa</th>
                            <th>Tanggal</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <a href="{{ route('point-transactions.index') }}" class="btn btn-secondary" data="back">
            <i class="fas fa-arrow-left mr-1"></i> Kembali
        </a>
    </div>
</section>

{{-- Adjust Modal --}}
<div class="modal fade" id="adjustModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sesuaikan Poin</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Jumlah Poin <small class="text-muted">(negatif untuk pengurangan)</small></label>
                    <input type="number" id="adjustPoints" class="form-control" placeholder="Contoh: 100 atau -50">
                </div>
                <div class="form-group">
                    <label>Keterangan</label>
                    <input type="text" id="adjustDesc" class="form-control" placeholder="Alasan penyesuaian">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-warning" id="btnAdjust">Simpan</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(function () {
    var table = $('#historyTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("point-transactions.user-detail", $endUser->id) }}',
            data: function (d) { d.type = $('#filterType').val(); }
        },
        columns: [
            { data: 0, width: '40px' },
            { data: 1 }, { data: 2 }, { data: 3 }, { data: 4 }, { data: 5 },
        ],
        order: [[5, 'desc']],
        pageLength: 25,
    });

    $('#btnFilter').on('click', function () { table.ajax.reload(); });

    $('#btnAdjust').on('click', function () {
        var points = parseInt($('#adjustPoints').val());
        var desc   = $('#adjustDesc').val().trim();

        if (!points || points === 0) { Swal.fire('Error', 'Masukkan jumlah poin yang valid.', 'error'); return; }
        if (!desc) { Swal.fire('Error', 'Keterangan wajib diisi.', 'error'); return; }

        $('#loaderaditdinda').show();
        $.ajax({
            url: '{{ route("point-transactions.adjust", $endUser->id) }}',
            method: 'POST',
            data: { _token: '{{ csrf_token() }}', points: points, description: desc },
            success: function (res) {
                $('#loaderaditdinda').hide();
                if (res.success) {
                    $('#adjustModal').modal('hide');
                    Swal.fire('Berhasil', res.message + ' Saldo baru: ' + res.new_balance + ' poin.', 'success')
                        .then(function () { location.reload(); });
                } else {
                    Swal.fire('Gagal', res.message, 'error');
                }
            },
            error: function () {
                $('#loaderaditdinda').hide();
                Swal.fire('Error', 'Terjadi kesalahan.', 'error');
            }
        });
    });
});
</script>
@endpush
@endsection