@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
    <style>
        .timeline { padding: 0 8px; }
.timeline-item { border-left: 2px solid rgba(0,0,0,0.03); padding-left: 12px; margin-left: 8px; }
.timeline-marker { margin-top: 6px; }

    </style>
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Offer Postback Log', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="[]" title="" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="All Global Postback">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <div>
                            <input class="form-control" type="text" id="search" placeholder="Search Here"
                                aria-label=".form-control-sm example">
                        </div>
                    </div>
                    <div class="d-flex gap-4" >
                        <div class="form-group"  style="width: 150px;">
                            <select name="status" id="status" class="form-control">
                                <option value="">Filter Status</option>
                                <option value="1">Credited</option>
                                <option value="0">Pending</option>
                            </select>
                        </div>
                        <div class="form-group" style="width: 250px;">
                            <div class="input-group">
                                <div class="input-group-text text-muted"> <i class="ri-calendar-line"></i> </div>
                                <input type="text" class="form-control" id="daterange"  placeholder="Date range picker">
                            </div>
                        </div>
                        <button class="btn btn-success btn-wave add-data" id="applyFilter">
                            <i class="ri-add-line me-1 align-middle"></i>
                            Apply Filter
                        </button>
                    </div>
                </x-slot>

                @php
                    $columns = [
                        ['label' => '#'],
                        ['label' => 'Offer'],
                        ['label' => 'User'],
                        ['label' => 'Click Hash'],
                        ['label' => 'Click Time'],
                        ['label' => 'Redirect'],
                        ['label' => 'Postback'],
                        ['label' => 'Status'],
                        ['label' => 'Reward'],
                        ['label' => 'Event'],
                        ['label' => 'View Detail'],
                    ];
                @endphp

                <x-ui.table id="data_table"  :columns="$columns"></x-ui.table>
            </x-ui.card>
        </div>
    </div>

@endsection
<x-ui.modal id="url-modal" title="Redirect Url">
    <div class="modal-body">
        <textarea class="form-control" type="text" class="col-12"
            id="pb1" placeholder="" cols="13" rows="6"
            aria-label=".form-control-sm example" readonly></textarea>
    </div>    

    @slot('footer')
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </form>
    @endslot
</x-ui.modal>  

<!-- Click Detail Modal -->
<div class="modal fade" id="clickDetailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Offer Click Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <div id="clickDetailContainer">
          <!-- injected timeline will appear here -->
          <div class="text-center py-4">Loading…</div>
        </div>
      </div>

      <div class="modal-footer">
        <a id="clickDetailOpenUrl" class="btn btn-outline-secondary" target="_blank" href="#" style="display:none">Open Last Redirect</a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

@section('scripts')
    @include('layouts.components.common-script')
    <script>


 document.addEventListener("DOMContentLoaded", function () {
            $('#daterange').val('');
            const picker = new DateRangePicker('#daterange', {
                dateFormat: 'Y-m-d',
                altFormat: 'd M Y',
                onApply: function(internalRange) {
                },
                onChange:function (selectedDates, dateStr, instance){
                }
            });
        });

    $(document).ready(function() {
            const table = new DataTableUtility('data_table', "{{ route('admin.offers.postback.log.data') }}", {
                status:() => $('#status').val() || null,
                start_date: () => $('#daterange').val().split(' to ')[0] || null,
                end_date: () => $('#daterange').val().split(' to ')[1] || null
            }, [{
                    data: 'click_id'
                },
                {
                    data: 'offer_name'
                },
                 {
                    data: 'user_id',
                    render:function(data,type,row){
                        return `<a href='/admin/users/track/${data}' target='blank' class='text-primary'>${data}</a>`;
                    }
                },
                {
                    data: 'click_hash',
                    render:function(data,type,row){
                        return '<span class="badge bg-dark">'+data+'</span>';
                    }
                },
               {
                    data: 'click_time'
                }, {
                    data: 'redirect_time',
                     render:function(data,type,row){
                        if (!data) {
                            return '<span class="text-muted">—</span>';
                        }
                         var safeUrl = String(row.final_url).replace(/'/g, "\\'");
                        return `
                        <div class="d-flex flex-column">
                            <small class="">${row.redirect_time ? row.redirect_time : ''}</small>
                            <a href="javascript:void(0)" 
                            class="small text-primary mt-1" 
                            onclick="showRedirectModal('${safeUrl}')">
                            View Redirect Url
                            </a>
                        </div>
                        `;
                    }
                },
                {
                    data: 'postback_time',
                     render:function(data,type,row){
                     return   (data!=null)? data:'—';
                    }
                },{
                    data: 'postback_status',
                    render: function(data, type, row) {
                        if(data == 'credited'){
                            return `<span class="badge fw-semibold badge-pill bg-success text-white fs-11">Credited</span>`;
                        }else if(data == 'reversal'){
                            return `<span class="badge fw-semibold badge-pill bg-danger text-white fs-11">Reversed</span>`;
                        }else{
                           return `<span class="badge fw-semibold badge-pill bg-warning text-white fs-11">Pending</span>`;
                        }
                    }
                },
                {
                    data: 'payout',
                     render:function(data,type,row){
                     return   (data!=null)? data:'—';
                    }
                },
                {
                    data: 'event_name',
                     render:function(data,type,row){
                     return   (data!=null)? data:'—';
                    }
                },{
                    data:null,
                    orderable: false,

                     render: function(data, type, row) {
                            return `<a href="javascript:void(0)" class="small text-primary" onclick="showClickDetails(${row.click_id})">View Details</a>`;
                            
                    },
                }
            ]);
            table.initialize();
           $('#applyFilter').on('click', () => table.reload({ resetPage: true }));
        });

        
   function showRedirectModal(url) {
            $('#pb1').text(url);
            var modal = new bootstrap.Modal(document.getElementById('url-modal'));
            modal.show();
        }



        function showClickDetails(clickId) {
            $('#clickDetailContainer').html('<div class="text-center py-4">Loading…</div>');
             $('#clickDetailOpenUrl').hide();

             var modalEl = document.getElementById('clickDetailModal');
            var modal = new bootstrap.Modal(modalEl);
            modal.show();

            if (clickId) {
                const url = `{{ route('admin.offers.postback.log.detail', ['id' => '__ID__']) }}`.replace('__ID__', clickId);
                AjaxUtil.get(url, function(res) {
                    if (!res.success) {
                        $('#clickDetailContainer').html('<div class="text-danger p-3">Not found</div>');
                        return;
                    }

                    var d = res.data;
                    var click = d.click;
                    var redirects = d.redirects || [];
                    var postbacks = d.postbacks || [];

                    var html = '';
                    var body = `
                        <div><span class="text-blue">User ID</span>: ${escHtml(click.user_id || click.user_pk_id || '-')}</div>
                        <div><span class="text-blue">Offer</span>: ${escHtml(click.offer_name || '-') } (internal id: ${escHtml(click.offer_id || '-')})</div>
                        <div><span class="text-blue">Click Hash</span>: <code>${escHtml(click.click_hash)}</code></div>
                    `;
                    html += timelineNode('Click created', click.click_time, body, 'bg-primary');

                    if (redirects.length) {
                        redirects.forEach(function(r, idx){
                        var rBody = `
                            <div><span class="text-primary">Final URL</span></div>
                            <pre style="white-space:pre-wrap; word-break:break-all; background:#f8f9fa; padding:8px; border-radius:6px;">${escHtml(r.final_url || '-')}</pre>
                            <div class="mt-2"><span class="text-primary">IP: </span> ${escHtml(r.redirect_ip || '-')}</div>
                            <div><span class="text-primary">User Agent: </span><small>${escHtml(r.redirect_ua || '-')}</small></div>
                        `;
                        html += timelineNode('Redirect #' + (idx+1), r.redirect_time, rBody, 'bg-info');
                        });

                        var last = redirects[redirects.length - 1];
                        if (last.final_url) {
                        $('#clickDetailOpenUrl').attr('href', last.final_url).show();
                        }
                    } else {
                        html += timelineNode('Redirect', '-', '<div class="text-muted">No redirects recorded</div>', 'bg-secondary');
                    }

                    if (postbacks.length) {
                        postbacks.forEach(function(pb, idx){
                        var pbBody = `
                            <div><strong>Network ID</strong> ${escHtml(pb.provider_entity_id || '-')}</div>
                            <div><strong>Event:</strong> ${escHtml(pb.event || pb.offer_name || '-')}</div>
                            <div><strong>Payout:</strong> ${pb.payout !== null ? escHtml(pb.payout) : '-'}</div>
                            <div><strong>Postback received:</strong> ${escHtml(pb.postback_received_at || '-')}</div>
                            <div><strong>Credited at:</strong> ${escHtml(pb.postback_credited_at || '-')}</div>
                            <div><strong>IP:</strong> ${escHtml(pb.postback_ip || '-')}</div>
                        `;
                        var statusClass = pb.postback_status === 'credited' ? 'bg-success' : (pb.postback_status === 'reversal' ? 'bg-danger' : 'bg-warning');
                        html += timelineNode('Postback #' + (idx+1) + ' — ' + (pb.postback_status || 'received'), pb.postback_received_at || pb.postback_credited_at, pbBody, statusClass);
                        });
                    } else {
                        html += timelineNode('Postback', '-', '<div class="text-muted">No postbacks received</div>', 'bg-secondary');
                    }

                    $('#clickDetailContainer').html(`<div class="timeline">${html}</div>`);
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error loading data.', 'error');
                });
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
    }

 


    function escHtml(s) {
  if (s === null || s === undefined) return '';
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#039;');
}

// build timeline node
function timelineNode(title, time, bodyHtml, typeClass = 'bg-light') {
  return `
    <div class="timeline-item mb-3">
      <div class="d-flex align-items-start">
        <div class="timeline-marker me-3 ${typeClass}" style="min-width:10px; width:10px; height:10px; border-radius:50%;"></div>
        <div class="flex-grow-1">
          <div class="small text-muted">${time ? escHtml(time) : '-'}</div>
          <div class="fw-bold">${escHtml(title)}</div>
          <div class="mt-2">${bodyHtml}</div>
        </div>
      </div>
    </div>
  `;
}    


    </script>
@endsection