@extends('adminlte::page')

@section('title', 'Diamond Log')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/bootstrap/dist/css/bootstrap-datepicker.min.css') }}">
    <style>
        .section-header { font-size: 16px; font-weight: 600; margin: 0; padding: 10px 0; }
        .pack-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.1); }
    </style>
@stop

@section('content_header')
@stop

@section('content')
    {{-- Top bar: Back + Member search --}}
    <div style="margin-bottom: 15px;">
        <a href="{{ route('members.index_v2') }}" class="btn btn-warning btn-sm">
            <i class="fa fa-arrow-left"></i> Back to Members
        </a>
        <div class="pull-right">
            <a href="{{ route('members-detail', ['idServer' => $member->member_server, 'idUser' => $member->member_id]) }}" class="btn btn-default btn-sm">
                <i class="fa fa-info-circle"></i> Info
            </a>
            <a href="{{ route('hero-visual', $member->member_id) }}" class="btn btn-primary btn-sm">
                <i class="fa fa-shield"></i> Hero
            </a>
        </div>
    </div>

    {{-- Member profile --}}
    <div class="box" style="border-top:3px solid #3c8dbc;">
        <div class="box-body" style="padding:20px 25px;">
            <div class="row">
                {{-- Left: Avatar + Name --}}
                <div class="col-sm-4" style="display:flex; align-items:center; gap:15px;">
                    <img src="{{ route('hero-avatar', $member->member_avatar) }}"
                         onerror="this.src='{{ route('hero-avatar', 'img_random') }}'"
                         style="width:70px; height:70px; border-radius:50%; border:3px solid #3c8dbc; box-shadow:0 2px 8px rgba(0,0,0,.15);">
                    <div>
                        <h3 style="margin:0 0 2px 0; font-size:20px;">{{ $member->member_name }}</h3>
                        <span class="text-muted" style="font-size:13px;">#{{ $member->member_id }} &middot; Server {{ $member->member_server }}</span>
                        <br>
                        <span class="label label-info" style="font-size:11px;">VIP {{ $member->member_vip_level ?? 0 }}</span>
                    </div>
                </div>

                {{-- Right: Stats --}}
                <div class="col-sm-8">
                    <div class="row text-center">
                        <div class="col-xs-4">
                            <div style="background:linear-gradient(135deg,#f5f0ff,#ede5ff); border-radius:8px; padding:12px 8px;">
                                <div style="font-size:11px; color:#555; text-transform:uppercase; letter-spacing:1px; font-weight:600;">
                                    <i class="fa fa-diamond" style="color:#9b59b6;"></i> Diamonds
                                </div>
                                <div style="font-size:22px; font-weight:700; color:#9b59b6;">
                                    {{ number_format($member->member_diamond ?? 0) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div style="background:linear-gradient(135deg,#fff9e6,#fff3cc); border-radius:8px; padding:12px 8px;">
                                <div style="font-size:11px; color:#555; text-transform:uppercase; letter-spacing:1px; font-weight:600;">
                                    <i class="fa fa-money" style="color:#f39c12;"></i> Gold
                                </div>
                                <div style="font-size:22px; font-weight:700; color:#f39c12;">
                                    {{ number_format($member->member_gold ?? 0) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div style="background:linear-gradient(135deg,#e8f8f0,#d0f0e0); border-radius:8px; padding:12px 8px;">
                                <div style="font-size:11px; color:#555; text-transform:uppercase; letter-spacing:1px; font-weight:600;">
                                    <i class="fa fa-usd" style="color:#27ae60;"></i> Purchased
                                </div>
                                <div style="font-size:22px; font-weight:700; color:#27ae60;">
                                    ${{ number_format($diamond_buy_total->total_buy_money ?? 0, 2) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Promotion Packs --}}
            <div style="margin-top:15px; padding-top:12px; border-top:1px dashed #ddd;">
                <span style="font-size:12px; color:#555; text-transform:uppercase; letter-spacing:1px; font-weight:700;">
                    <i class="fa fa-gift" style="color:#e74c3c;"></i> Active Promotions
                </span>
                @if(!empty($packStatus))
                    @foreach($packStatus as $packType => $success)
                        @if($success)
                            <span class="label label-success" style="font-size:11px; margin-left:6px;">
                                <i class="fa fa-check"></i> {{ $packType }}
                            </span>
                        @endif
                    @endforeach
                @endif
                <span id="pack-status" style="margin-left:8px;"></span>
                <button type="button" class="btn btn-default btn-xs pull-right" data-toggle="modal" data-target="#addPackModal">
                    <i class="fa fa-plus"></i> Add Promotion Pack
                </button>
                <div style="margin-top:8px; display:flex; flex-wrap:wrap; gap:8px;">
                    @foreach($activePacks as $pack)
                        @php
                            $packKeyMap = ['Stamina Pack'=>'FORCE_SHOW_STAMINA_PACK_TO_USER','Gold Pack'=>'FORCE_SHOW_GOLD_PACK_TO_USER','Hero Pack'=>'FORCE_SHOW_HERO_TO_USER','Ultimate Hero Pack'=>'FORCE_SHOW_7STAR_HERO_TO_USER'];
                            $packKey = $packKeyMap[$pack['type']] ?? '';
                            $packColors = ['Stamina Pack'=>['#e67e22','#fdf2e9'],'Gold Pack'=>['#f1c40f','#fef9e7'],'Hero Pack'=>['#2980b9','#ebf5fb'],'Ultimate Hero Pack'=>['#8e44ad','#f4ecf7']];
                            $color = $packColors[$pack['type']] ?? ['#666','#f5f5f5'];
                        @endphp
                        <div class="pack-card" style="display:inline-flex; align-items:center; gap:8px; background:{{ $color[1] }}; border:1px solid {{ $color[0] }}33; border-left:3px solid {{ $color[0] }}; border-radius:6px; padding:6px 12px;">
                            @if(in_array($pack['type'], ['Hero Pack', 'Ultimate Hero Pack']) && $pack['value'])
                                <img src="{{ route('hero-avatar', $pack['value']) }}"
                                     onerror="this.style.display='none'"
                                     style="width:28px; height:28px; border-radius:4px; border:1px solid {{ $color[0] }}44;">
                            @endif
                            <div>
                                <div style="font-size:12px; font-weight:600; color:{{ $color[0] }};">{{ $pack['type'] }}</div>
                                @if(in_array($pack['type'], ['Hero Pack', 'Ultimate Hero Pack']) && $pack['value'])
                                    <div style="font-size:11px; color:#555;">Hero #{{ $pack['value'] }}</div>
                                @endif
                            </div>
                            <a href="javascript:void(0)" class="remove-pack-btn" data-pack="{{ $packKey }}"
                               style="color:#ccc; margin-left:4px; font-size:14px;" title="Remove"
                               onmouseover="this.style.color='#e74c3c'" onmouseout="this.style.color='#ccc'">
                                <i class="fa fa-times-circle"></i>
                            </a>
                        </div>
                    @endforeach
                    @if(empty($activePacks))
                        <span class="text-muted" style="font-size:13px;">No active packs</span>
                    @endif
                </div>

                {{-- Promotion Timeline (inline) --}}
                <div style="margin-top:12px; padding-top:10px; border-top:1px dashed #ddd;">
                    <span style="font-size:12px; color:#555; text-transform:uppercase; letter-spacing:1px; font-weight:700;">
                        <i class="fa fa-tasks" style="color:#e67e22;"></i> Promotion Timeline
                    </span>
                    <div id="gantt-chart" style="margin-top:8px; min-height:40px;">
                        <p class="text-muted" id="gantt-loading"><i class="fa fa-spinner fa-spin"></i> Loading...</p>
                    </div>
                </div>
            </div>

            {{-- Add Pack Modal --}}
            <div class="modal fade" id="addPackModal" role="dialog">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header" style="background:#3c8dbc; color:#fff;">
                            <button type="button" class="close" data-dismiss="modal" style="color:#fff;">&times;</button>
                            <h4 class="modal-title"><i class="fa fa-gift"></i> Add Promotion Pack</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Pack Type</label>
                                <select id="pack-type" class="form-control">
                                    <option value="FORCE_SHOW_STAMINA_PACK_TO_USER">Stamina Pack</option>
                                    <option value="FORCE_SHOW_GOLD_PACK_TO_USER">Gold Pack</option>
                                    <option value="FORCE_SHOW_HERO_TO_USER">Hero Pack</option>
                                    <option value="FORCE_SHOW_7STAR_HERO_TO_USER">Ultimate Hero Pack</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Value</label>
                                <input type="text" id="pack-value" class="form-control" value="1"
                                       placeholder="1 for Stamina/Gold, Hero ID for Hero packs">
                                <p class="help-block" style="font-size:11px;">Hero ID for Hero/Ultimate pack, 1 for Stamina/Gold</p>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="pack-add-btn" class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Diamond Log --}}
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-diamond"></i> Diamond Log
            </h3>
        </div>
        <div class="box-body">
            {{-- Filter row --}}
            <form id="search-form" class="form" method="post">
                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label>Member ID</label>
                            <input class="form-control" type="number" name="member_id" id="input-member-id"
                                   value="{{ $member->member_id }}" min="1" />
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label>From</label>
                            <input class="form-control date" autocomplete="off" type="text" name="date_from"
                                   id="date-from" placeholder="yyyy-mm-dd" value="{{ isset($dateFrom) ? $dateFrom : '' }}"/>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label>To</label>
                            <input class="form-control date" autocomplete="off" type="text" name="date_to"
                                   id="date-to" placeholder="yyyy-mm-dd" value="{{ isset($dateTo) ? $dateTo : '' }}"/>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label>&nbsp;</label><br>
                            <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                        </div>
                    </div>
                </div>
            </form>

            {{-- Hidden elements for JS compatibility --}}
            <span id="total-buy-number" style="display:none;">0</span>
            <span id="total-buy-money" style="display:none;">0</span>
            <span id="total-use-number" style="display:none;">0</span>
            <span id="diamond-total-buy" style="display:none;">{{ $member->diamond_total_buy }}</span>
            <span id="vip-level" style="display:none;">{{ $member->member_vip_level ?? 0 }}</span>
        </div>
    </div>

    {{-- Buy Money by Date chart --}}
    <div class="box box-success">
        <div class="box-header with-border">
            <h3 class="section-header" style="display:inline-block;"><i class="fa fa-line-chart text-green"></i> Buy Money by Date</h3>
            <span class="pull-right" style="padding-top:10px; font-size:14px;">
                <span class="text-muted">Period:</span> <strong class="text-green" id="chart-period-total">$0</strong>
                &nbsp;&middot;&nbsp;
                <span class="text-muted">All time:</span> <strong style="color:#605ca8;">${{ number_format($diamond_buy_total->total_buy_money ?? 0, 2) }}</strong>
            </span>
        </div>
        <div class="box-body">
            <canvas id="buy-money-chart" height="45"></canvas>
        </div>
    </div>

    {{-- Diamond Buy table --}}
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="section-header"><i class="fa fa-plus-circle text-blue"></i> Diamond Buy</h3>
        </div>
        <div class="box-body">
            <table id="buy-table" class="table table-bordered table-striped table-condensed" style="width:100%">
                <thead>
                <tr>
                    <th>Buy Time</th>
                    <th>Buy Number</th>
                    <th>Buy Money</th>
                    <th>Buy Package</th>
                    <th style="width:120px">Actions</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- Edit Diamond Buy Modal --}}
    <div class="modal fade" id="edit-buy-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h3 class="modal-title">Edit Diamond Buy</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="edit-buy-id">
                    <div class="form-group">
                        <label>Buy ID</label>
                        <input class="form-control" type="text" id="edit-buy-id-show" disabled>
                    </div>
                    <div class="form-group">
                        <label>Buy Number</label>
                        <input class="form-control" type="number" id="edit-buy-number">
                    </div>
                    <div class="form-group">
                        <label>Buy Money</label>
                        <input class="form-control" type="number" step="0.01" id="edit-buy-money">
                    </div>
                    <div id="edit-buy-result" style="margin-top:10px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="submit-edit-buy"><i class="fa fa-save"></i> Save</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Diamond Use table --}}
    <div class="box box-warning">
        <div class="box-header with-border">
            <h3 class="section-header"><i class="fa fa-minus-circle text-yellow"></i> Diamond Use</h3>
        </div>
        <div class="box-body">
            <table id="use-table" class="table table-bordered table-striped table-condensed" style="width:100%">
                <thead>
                <tr>
                    <th>Use Time</th>
                    <th>Use Number</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@stop

@section('js')
    <script src="{{ asset('vendor/adminlte/vendor/bootstrap/dist/js/bootstrap-datepicker.min.js.download') }}"></script>
    <script type="text/javascript">
        $('.date').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            orientation: "bottom",
        });

        var currentMemberId = {{ $member->member_id }};
        var baseBuyTotalUrl = '{{ url("members") }}';
        var buyMoneyChart = null;

        function getMemberId() {
            return parseInt($('#input-member-id').val()) || currentMemberId;
        }

        function getTotalBuy() {
            var mid = getMemberId();
            $.ajax({
                url: baseBuyTotalUrl + '/' + mid + '/total-diamond-buy',
                type: 'get',
                data: { date_from: $('input[name=date_from]').val(), date_to: $('input[name=date_to]').val() },
                dataType: 'json',
                success: function (response) {
                    if (response.diamond_buy_total) {
                        var d = response.diamond_buy_total;
                        $('#total-buy-number').text(d.total_buy_number ? d.total_buy_number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '0');
                        $('#total-buy-money').text(d.total_buy_money ? d.total_buy_money.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '0');
                    } else {
                        $('#total-buy-number').text('0');
                        $('#total-buy-money').text('0');
                    }
                }
            });
        }

        function getTotalUse() {
            var mid = getMemberId();
            $.ajax({
                url: baseBuyTotalUrl + '/' + mid + '/total-diamond-use',
                type: 'get',
                data: { date_from: $('input[name=date_from]').val(), date_to: $('input[name=date_to]').val() },
                dataType: 'json',
                success: function (response) {
                    if (response.diamond_use_total) {
                        var d = response.diamond_use_total;
                        $('#total-use-number').text(d.total_use_number ? d.total_use_number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '0');
                    } else {
                        $('#total-use-number').text('0');
                    }
                }
            });
        }

        function updateMemberHeader(mid) {
            $.ajax({
                url: baseBuyTotalUrl + '/' + mid,
                type: 'get',
                dataType: 'html',
                success: function (html) {
                    // Parse member name from response
                    var match = html.match(/member_name["\s:]+([^<"]+)/i);
                    // Simple: just update the ID display
                    $('#member-id-display').text(mid);
                }
            });
        }

        $(document).ready(function () {
            getTotalBuy();
            getTotalUse();
            loadBuyMoneyChart();
            loadPromotionGantt();
        });

        var buyTable = $('#buy-table').DataTable({
            dom: "<'row'<'col-xs-6'l><'col-xs-6'p>>" +
                "<'row'<'col-xs-12't>>" +
                "<'row'<'col-xs-12'i>>",
            processing: true,
            serverSide: true,
            searching: false,
            pageLength: 10,
            ajax: {
                url: baseBuyTotalUrl + '/' + currentMemberId + '/diamond-buy',
                data: function (d) {
                    d.date_from = $('input[name=date_from]').val();
                    d.date_to = $('input[name=date_to]').val();
                }
            },
            columns: [
                {data: 'diamond_buy_time', name: 'diamond_buy_time'},
                {data: 'diamond_buy_number', name: 'diamond_buy_number'},
                {data: 'diamond_buy_money', name: 'diamond_buy_money'},
                {data: 'diamond_buy_package', name: 'diamond_buy_package'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });

        var useTable = $('#use-table').DataTable({
            dom: "<'row'<'col-xs-6'l><'col-xs-6'p>>" +
                "<'row'<'col-xs-12't>>" +
                "<'row'<'col-xs-12'i>>",
            processing: true,
            serverSide: true,
            searching: false,
            pageLength: 10,
            ajax: {
                url: baseBuyTotalUrl + '/' + currentMemberId + '/diamond-use',
                data: function (d) {
                    d.date_from = $('input[name=date_from]').val();
                    d.date_to = $('input[name=date_to]').val();
                }
            },
            columns: [
                {data: 'diamond_use_time', name: 'diamond_use_time'},
                {data: 'diamond_use_number', name: 'diamond_use_number'},
            ],
        });

        function loadBuyMoneyChart() {
            var mid = getMemberId();
            $.ajax({
                url: baseBuyTotalUrl + '/' + mid + '/buy-money-by-date',
                type: 'get',
                data: { date_from: $('input[name=date_from]').val(), date_to: $('input[name=date_to]').val() },
                dataType: 'json',
                success: function (data) {
                    // Build a map of date -> money
                    var dataMap = {};
                    data.forEach(function(r) { dataMap[r.buy_date] = parseFloat(r.total_money); });

                    // Fill all dates from-to
                    var dateFrom = $('input[name=date_from]').val();
                    var dateTo = $('input[name=date_to]').val();
                    var labels = [];
                    var values = [];

                    if (dateFrom && dateTo) {
                        var cur = new Date(dateFrom);
                        var end = new Date(dateTo);
                        while (cur <= end) {
                            var key = cur.toISOString().slice(0, 10);
                            labels.push(key);
                            values.push(dataMap[key] || 0);
                            cur.setDate(cur.getDate() + 1);
                        }
                    } else {
                        labels = data.map(function(r) { return r.buy_date; });
                        values = data.map(function(r) { return parseFloat(r.total_money); });
                    }

                    var periodTotal = values.reduce(function(a, b) { return a + b; }, 0);
                    $('#chart-period-total').text('$' + periodTotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','));

                    if (buyMoneyChart) buyMoneyChart.destroy();

                    var ctx = document.getElementById('buy-money-chart');
                    buyMoneyChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: 'Buy Money ($)',
                                data: values,
                                borderColor: '#00a65a',
                                backgroundColor: 'rgba(0,166,90,0.1)',
                                fill: true,
                                pointRadius: 4,
                                pointBackgroundColor: '#00a65a',
                                pointHoverRadius: 6,
                                borderWidth: 2,
                                tension: 0.3
                            }]
                        },
                        options: {
                            responsive: true,
                            legend: { display: false },
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true,
                                        callback: function(v) { return '$ ' + v.toLocaleString(); }
                                    }
                                }],
                                xAxes: [{
                                    ticks: { autoSkip: true, maxTicksLimit: 15 }
                                }]
                            },
                            tooltips: {
                                callbacks: {
                                    label: function(t) {
                                        return '$ ' + t.yLabel.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
                                    }
                                }
                            }
                        }
                    });
                }
            });
        }

        function updateUrl() {
            var url = new URL(window.location.href);
            url.searchParams.set('date_from', $('input[name=date_from]').val());
            url.searchParams.set('date_to', $('input[name=date_to]').val());
            window.history.replaceState({}, '', url.toString());
        }

        $('#search-form').on('submit', function (e) {
            e.preventDefault();
            var mid = getMemberId();

            if (mid !== currentMemberId) {
                window.location.href = baseBuyTotalUrl + '/' + mid + '/diamond-log'
                    + '?date_from=' + encodeURIComponent($('input[name=date_from]').val())
                    + '&date_to=' + encodeURIComponent($('input[name=date_to]').val());
                return;
            }

            updateUrl();
            getTotalBuy();
            getTotalUse();
            loadBuyMoneyChart();
            loadPromotionGantt();
            buyTable.draw();
            useTable.draw();
        });

        function refreshAll(res) {
            buyTable.draw(false);
            getTotalBuy();
            loadBuyMoneyChart();
            if (res && res.diamond_total_buy !== undefined) {
                $('#diamond-total-buy').text(res.diamond_total_buy.toLocaleString());
            }
            if (res && res.vip_level !== undefined) {
                $('#vip-level').text(res.vip_level);
            }
        }

        // Edit Diamond Buy
        $(document).on('click', '.btn-edit-buy', function () {
            $('#edit-buy-id').val($(this).data('id'));
            $('#edit-buy-id-show').val($(this).data('id'));
            $('#edit-buy-number').val($(this).data('number'));
            $('#edit-buy-money').val($(this).data('money'));
            $('#edit-buy-result').html('');
            $('#edit-buy-modal').modal('show');
        });

        $('#submit-edit-buy').on('click', function () {
            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');

            $.ajax({
                url: baseBuyTotalUrl + '/' + currentMemberId + '/ajax-update-diamond-buy',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    buy_id: $('#edit-buy-id').val(),
                    buy_number: $('#edit-buy-number').val(),
                    buy_money: $('#edit-buy-money').val()
                },
                dataType: 'json',
                success: function (res) {
                    btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save');
                    if (res.success) {
                        $('#edit-buy-result').html('<span class="text-green"><i class="fa fa-check"></i> ' + res.message + '</span>');
                        refreshAll(res);
                        setTimeout(function() { $('#edit-buy-modal').modal('hide'); }, 800);
                    } else {
                        $('#edit-buy-result').html('<span class="text-red">' + res.message + '</span>');
                    }
                },
                error: function () {
                    btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save');
                    $('#edit-buy-result').html('<span class="text-red">Error connecting to server</span>');
                }
            });
        });

        // Delete Diamond Buy
        $(document).on('click', '.btn-delete-buy', function () {
            var id = $(this).data('id');
            if (!confirm('Delete diamond buy #' + id + '?')) return;

            var row = $(this).closest('tr');
            $.ajax({
                url: baseBuyTotalUrl + '/' + currentMemberId + '/ajax-delete-diamond-buy',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', buy_id: id },
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        row.fadeOut(300, function () { refreshAll(res); });
                    } else {
                        alert(res.message);
                    }
                },
                error: function () { alert('Error connecting to server'); }
            });
        });
        // Promotion Pack - Add
        $('#pack-type').on('change', function () {
            var type = $(this).val();
            if (type.indexOf('HERO') > -1) {
                $('#pack-value').attr('placeholder', 'Hero ID').val('');
            } else {
                $('#pack-value').val('1');
            }
        });

        $('#pack-add-btn').on('click', function () {
            var btn = $(this);
            btn.prop('disabled', true);
            $.ajax({
                url: '{{ url("members") }}/{{ $member->member_id }}/force-show-pack',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    pack_name: $('#pack-type').val(),
                    value: $('#pack-value').val(),
                    action: 'add'
                },
                success: function (res) {
                    btn.prop('disabled', false);
                    if (res.success) {
                        $('#addPackModal').modal('hide');
                        location.reload();
                    } else {
                        alert(res.message || 'Error');
                    }
                },
                error: function () { btn.prop('disabled', false); alert('Error'); }
            });
        });

        // Promotion Pack - Remove
        $(document).on('click', '.remove-pack-btn', function () {
            if (!confirm('Remove this pack?')) return;
            var el = $(this);
            $.ajax({
                url: '{{ url("members") }}/{{ $member->member_id }}/force-show-pack',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    pack_name: el.data('pack'),
                    action: 'remove'
                },
                success: function (res) {
                    if (res.success) {
                        el.closest('.label').fadeOut(300, function () { $(this).remove(); });
                        $('#pack-status').html('<span class="label label-success">Removed!</span>');
                        setTimeout(function () { $('#pack-status').html(''); }, 2000);
                    } else {
                        alert(res.message || 'Error');
                    }
                },
                error: function () { alert('Error'); }
            });
        });
        // Promotion Gantt Chart
        var packColors = {
            'Stamina Pack':  {bg: '#fdf2e9', border: '#e67e22'},
            'Gold Pack':     {bg: '#fef9e7', border: '#f1c40f'},
            'Hero Pack':     {bg: '#ebf5fb', border: '#2980b9'},
            'Ultimate Hero Pack': {bg: '#f4ecf7', border: '#8e44ad'}
        };

        function loadPromotionGantt() {
            var mid = getMemberId();
            $.ajax({
                url: '{{ url("members") }}/' + mid + '/promotion-logs',
                type: 'get',
                data: { date_from: $('input[name=date_from]').val(), date_to: $('input[name=date_to]').val() },
                dataType: 'json',
                success: function (res) {
                    renderGantt(res.intervals, res.date_from, res.date_to);
                },
                error: function () {
                    $('#gantt-chart').html('<p class="text-muted text-center">Could not load promotion data</p>');
                }
            });
        }

        function renderGantt(intervals, dateFrom, dateTo) {
            var container = $('#gantt-chart');
            container.empty();

            if (!intervals || intervals.length === 0) {
                container.html('<p class="text-muted text-center">No promotion history</p>');
                return;
            }

            var rangeStart = dateFrom ? new Date(dateFrom + ' 00:00:00') : null;
            var rangeEnd = dateTo ? new Date(dateTo + ' 23:59:59') : null;
            var now = new Date();

            // Find global min/max
            if (!rangeStart) {
                rangeStart = new Date(Math.min.apply(null, intervals.map(function(i) { return new Date(i.start.replace(' ', 'T')); })));
            }
            if (!rangeEnd) {
                rangeEnd = new Date(Math.max.apply(null, intervals.map(function(i) { return new Date((i.end || now.toISOString()).replace(' ', 'T')); })));
            }

            var totalMs = rangeEnd - rangeStart;
            if (totalMs <= 0) totalMs = 86400000;

            // Group intervals by type
            var types = ['Stamina Pack', 'Gold Pack', 'Hero Pack', 'Ultimate Hero Pack'];
            var grouped = {};
            types.forEach(function(t) { grouped[t] = []; });
            intervals.forEach(function(i) {
                if (!grouped[i.type]) grouped[i.type] = [];
                grouped[i.type].push(i);
            });

            // Date axis
            var axisHtml = '<div style="position:relative; height:20px; margin-left:160px; margin-bottom:5px; border-bottom:1px solid #ddd; font-size:11px; color:#666; font-weight:600;">';
            var dayMs = 86400000;
            var totalDays = Math.ceil(totalMs / dayMs);
            var step = Math.max(1, Math.ceil(totalDays / 10));
            for (var d = 0; d <= totalDays; d += step) {
                var tickDate = new Date(rangeStart.getTime() + d * dayMs);
                var leftPct = (d * dayMs / totalMs) * 100;
                if (leftPct > 100) leftPct = 100;
                axisHtml += '<span style="position:absolute; left:' + leftPct + '%; transform:translateX(-50%);">' + tickDate.toISOString().slice(5, 10) + '</span>';
            }
            axisHtml += '</div>';
            container.append(axisHtml);

            // Rows
            types.forEach(function(type) {
                var items = grouped[type];
                if (!items || items.length === 0) return;

                var color = packColors[type] || {bg: '#f5f5f5', border: '#999'};
                var rowHtml = '<div style="display:flex; align-items:center; margin-bottom:6px; height:32px;">';
                rowHtml += '<div style="width:155px; flex-shrink:0; font-size:12px; font-weight:700; color:' + color.border + '; padding-right:10px; text-align:right; white-space:nowrap;">' + type + '</div>';
                rowHtml += '<div style="flex:1; position:relative; height:100%; background:#f9f9f9; border-radius:4px; overflow:hidden;">';

                items.forEach(function(item) {
                    var start = new Date(item.start.replace(' ', 'T'));
                    var end = item.end ? new Date(item.end.replace(' ', 'T')) : rangeEnd;

                    // Clamp to range
                    if (start < rangeStart) start = rangeStart;
                    if (end > rangeEnd) end = rangeEnd;

                    var leftPct = ((start - rangeStart) / totalMs) * 100;
                    var widthPct = ((end - start) / totalMs) * 100;
                    if (widthPct < 0.5) widthPct = 0.5;

                    var label = item.value && item.value !== '1' ? '#' + item.value : '';
                    var statusLabel = '';
                    var barBg = color.bg;
                    var barBorder = color.border;
                    var barColor = color.border;

                    if (item.success) {
                        statusLabel = ' \u2714 success';
                        barBg = '#d5f5e3';
                        barBorder = '#27ae60';
                        barColor = '#27ae60';
                    } else if (!item.end) {
                        statusLabel = ' (active)';
                    }

                    rowHtml += '<div style="position:absolute; left:' + leftPct + '%; width:' + widthPct + '%;';
                    rowHtml += 'height:100%; background:' + barBg + '; border:1px solid ' + barBorder + ';';
                    rowHtml += 'border-radius:3px; display:flex; align-items:center; justify-content:center;';
                    rowHtml += 'font-size:11px; color:' + barColor + '; font-weight:700; overflow:hidden; white-space:nowrap;"';
                    rowHtml += ' title="' + item.start.slice(0, 16) + ' \u2192 ' + (item.end ? item.end.slice(0, 16) : 'now') + (item.success ? ' (purchased)' : '') + '">';
                    rowHtml += label + statusLabel;
                    rowHtml += '</div>';
                });

                rowHtml += '</div></div>';
                container.append(rowHtml);
            });
        }
    </script>
@endsection