@extends('layouts.admin')

@section('style')
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap">
<style>
  /* the wheel, flattened: one segment per slot, sized to its share of the draw */
  .odds-cell {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: .5rem;
    min-width: 230px;
  }

  .odds-bar {
    display: flex;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    background: #e9ecef;
  }

  /* placed explicitly, so the cell reads as two rows rather than three */
  .odds-bar { grid-row: 1; grid-column: 1; }

  .odds-cell .odds-open { grid-row: 1; grid-column: 2; }

  /* replaces the bare slot integer that used to have its own column */
  .odds-count {
    grid-row: 2;
    grid-column: 1;
    padding-top: .25rem;
    font-size: .75rem;
    color: #6c757d;
  }

  .odds-share {
    grid-row: 2;
    grid-column: 2;
    padding-top: .25rem;
    text-align: right;
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #495057;
  }

  .odds-seg {
    background: #ced4da;
    box-shadow: inset -1px 0 0 #fff;
  }

  .odds-seg.is-winner {
    background: #17a2b8;
  }

  /* configured width kept so the bar still reads as the wheel in settings,
     hatched because the slot was removed before the draw */
  .odds-seg.is-shifted {
    background: repeating-linear-gradient(45deg,
      #ced4da, #ced4da 2px, transparent 2px, transparent 5px);
    opacity: .65;
  }

  /* a row action: pill-shaped so it reads as a control against the square
     bars and table rules around it */
  .odds-open {
    white-space: nowrap;
    line-height: 1.2;
    border-radius: 50rem;
    padding-left: .6rem;
    padding-right: .6rem;
  }

  .odds-modal-total {
    font-variant-numeric: tabular-nums;
  }

  /* ---- spin detail ---------------------------------------------------- */

  #odds-modal {
    --o-ink: #16212b;
    --o-muted: #64727f;
    --o-rule: #dde4ea;
    --o-panel: #f1f5f8;
    --o-win: #0f766e;
    --o-void: #a3aeb8;
    --o-shift: #b45309;
  }

  #odds-modal .modal-content {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--o-ink);
  }

  #odds-modal .odds-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--o-rule);
    padding-bottom: 1rem;
  }

  #odds-modal .modal-title {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0;
  }

  #odds-modal .modal-title .won-amount { color: var(--o-win); }

  #odds-modal .odds-when {
    margin: .3rem 0 0;
    font-size: .8125rem;
    color: var(--o-muted);
  }

  #odds-modal .odds-status {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .4rem;
    border: 1px solid var(--o-rule);
    border-radius: 2px;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--o-muted);
  }

  #odds-modal .odds-body { padding: 1.15rem 1rem 1.25rem; }

  /* the two bands: the whole point is comparing one against the other */
  .odds-compare {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .9rem 1rem 1rem;
    background: var(--o-panel);
    border-radius: 3px;
    margin-bottom: 1.15rem;
  }

  .odds-track { display: flex; flex-direction: column; gap: .3rem; }

  .odds-track-name {
    font-size: .75rem;
    font-weight: 500;
    color: var(--o-muted);
  }

  .odds-band {
    display: flex;
    height: 30px;
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
  }

  .odds-band span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2px;
    overflow: hidden;
    border-right: 1px solid #fff;
    background: #c4ced7;
  }

  .odds-band span:last-child { border-right: 0; }

  .odds-band i {
    font-style: normal;
    font-size: .6875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--o-ink);
    white-space: nowrap;
  }

  .odds-band span.is-winner { background: var(--o-win); }

  .odds-band span.is-winner i { color: #fff; }

  /* removed slots keep their configured width but read as absent */
  .odds-band span.is-void {
    background: repeating-linear-gradient(45deg,
      var(--o-void), var(--o-void) 2px, #fff 2px, #fff 5px);
  }

  /* the hatch would swallow a bare number, so it gets a small clear ground */
  .odds-band span.is-void i {
    color: var(--o-muted);
    background: rgba(255, 255, 255, .82);
    padding: 0 .25rem;
    border-radius: 2px;
  }

  .odds-note {
    margin: .15rem 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--o-muted);
  }

  /* ---- per-slot rows --------------------------------------------------- */

  .odds-rows { display: flex; flex-direction: column; }

  .odds-row {
    display: grid;
    grid-template-columns: 1fr auto 5.5rem 5.5rem;
    align-items: baseline;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--o-rule);
    font-size: .875rem;
  }

  .odds-row:last-child { border-bottom: 0; }

  .odds-row.is-void { color: var(--o-muted); }

  .odds-slot { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }

  .odds-slot b { font-weight: 600; }

  .odds-row.is-winner .odds-slot b { color: var(--o-win); }

  .odds-reward {
    font-size: .75rem;
    color: var(--o-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .odds-figure {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .odds-figure small { display: block; font-size: .6875rem; color: var(--o-muted); }

  /* column names, stated once */
  .odds-row.odds-heading {
    padding-bottom: .35rem;
    border-bottom-color: var(--o-ink);
    font-size: .6875rem;
    color: var(--o-muted);
  }

  .odds-delta { color: var(--o-shift); font-weight: 500; }

  .odds-removed {
    font-size: .75rem;
    font-weight: 500;
    color: var(--o-void);
  }

  @media (max-width: 575.98px) {
    .odds-row { grid-template-columns: 1fr 4.5rem 4.5rem; }
    .odds-reward { display: none; }

    /* the band is too narrow here for any segment to hold a number */
    .odds-band i { display: none; }
  }
</style>
@endsection

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Spin Odds Log</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{ route('admin') }}">Home</a></li>
          <li class="breadcrumb-item active">Spin Odds Log</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<!-- Main 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">The odds each spin was drawn against</h3>
          </div>
          <div class="card-body">
            <div class="row mb-3">
              <div class="col-md-3">
                <label for="status-filter" class="form-label">Filter by Status:</label>
                <select id="status-filter" class="form-control">
                  <option value="">All Statuses</option>
                  @foreach($statuses as $status)
                  <option value="{{ $status }}">{{ ucfirst($status) }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4 d-flex align-items-end">
                <div class="custom-control custom-checkbox mb-2">
                  <input type="checkbox" class="custom-control-input" id="altered-filter">
                  <label class="custom-control-label" for="altered-filter">
                    Only spins a multiplier or period changed
                  </label>
                </div>
              </div>
            </div>

            <div class="table-responsive">
              <table id="spin-odds-table" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>When</th>
                    <th>Customer</th>
                    <th>Won</th>
                    <th>Status</th>
                    <th>The wheel it was drawn against</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="modal fade" id="odds-modal" tabindex="-1" role="dialog" aria-labelledby="odds-modal-title">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header odds-head">
        <div class="odds-outcome">
          <h4 class="modal-title" id="odds-modal-title">Wheel at the time of the spin</h4>
          <p class="odds-when" id="odds-modal-when"></p>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body odds-body">
        <div class="odds-compare">
          <div class="odds-track">
            <span class="odds-track-name">As it spun</span>
            <div class="odds-band" id="odds-band-drawn"></div>
          </div>
          <div class="odds-track">
            <span class="odds-track-name">As configured</span>
            <div class="odds-band" id="odds-band-config"></div>
          </div>
          <p class="odds-note" id="odds-modal-note"></p>
        </div>
        <div class="odds-rows" id="odds-modal-body"></div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('script')
<script>
  $(function () {
    var table = $('#spin-odds-table').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: "{{ route('admin.spin_odds_logs.index') }}",
        type: 'GET',
        data: function (d) {
          d.status = $('#status-filter').val();
          d.altered_only = $('#altered-filter').is(':checked') ? 1 : 0;
        }
      },
      columns: [
        { data: 'spun_at', name: 'created_at', orderable: false, searchable: false },
        { data: 'spinner', name: 'spinner', orderable: false, searchable: false },
        { data: 'prize', name: 'prize', orderable: false, searchable: true },
        { data: 'status_badge', name: 'status', orderable: false, searchable: false },
        { data: 'odds', name: 'odds', orderable: false, searchable: false }
      ],
      order: [],
      pageLength: 25,
      responsive: true,
      language: {
        search: 'Search prizes:',
        emptyTable: 'No spins recorded yet.',
        zeroRecords: 'No spins match those filters.'
      }
    });

    $('#status-filter, #altered-filter').on('change', function () {
      table.draw();
    });

    $('#spin-odds-table').on('click', '.odds-open', function () {
      var payload = $(this).data('slots');
      var rows = '';

      {{-- share is quoted against the configured odds, matching the bar in the table --}}
      var round4 = function (n) { return Math.round(n * 10000) / 10000; };
      var esc = function (v) { return $('<div>').text(v == null ? '' : v).html(); };

      {{-- the payload is encoded with JSON_FORCE_OBJECT, so every list arrives as
           an object keyed "0","1",... - .map() would throw on it --}}
      var toArr = function (v) { return $.map(v || [], function (x) { return x; }); };

      {{-- one decimal is all the band needs - the exact figures are in the rows
           below - and a segment under 5% is narrower than any label it could
           hold, so those are left to the tooltip --}}
      var label = function (pct) {
        return pct >= 5 ? '<i>' + pct.toFixed(1) + '%</i>' : '';
      };

      {{-- the headline answers the question everyone opens this to ask --}}
      var outcome = payload.outcome || {};
      var wonVouchers = toArr(outcome.vouchers);
      var prize = [];
      if (outcome.points > 0) {
        prize.push(outcome.points + (outcome.points === 1 ? ' point' : ' points'));
      }
      if (wonVouchers.length) {
        prize.push(wonVouchers.length === 1
          ? 'voucher ' + wonVouchers[0]
          : wonVouchers.length + ' vouchers');
      }

      var headline;
      if (outcome.no_slot) {
        headline = 'The wheel stopped on nothing';
      } else if (outcome.won && prize.length) {
        headline = 'Won <span class="won-amount">' + esc(prize.join(' and ')) + '</span>'
          + (outcome.slot ? ' on ' + esc(outcome.slot) : '');
      } else {
        headline = 'No prize' + (outcome.slot ? ' on ' + esc(outcome.slot) : '');
      }

      $('#odds-modal-title').html(headline);
      $('#odds-modal-when').html(
        (outcome.at ? esc(outcome.at) : 'Time not recorded')
        + (outcome.status ? '<span class="odds-status">' + esc(outcome.status) + '</span>' : '')
      );

      var drawnBand = '';
      var configBand = '';
      var removedNames = [];

      rows += '<div class="odds-row odds-heading">'
        + '<span></span><span></span>'
        + '<span class="odds-figure">configured</span>'
        + '<span class="odds-figure">of the draw</span></div>';

      $.each(payload.slots, function (id, slot) {
        var share = payload.total > 0 ? (slot.admin / payload.total * 100) : 0;

        {{-- what the slot was really worth on the draw. A shifted slot carries
             used = 0 and so lands at 0%, while the survivors absorb its share --}}
        var drawShare = payload.used_total > 0 ? (slot.used / payload.used_total * 100) : 0;

        var offset = round4(slot.used - slot.admin);
        var altered = offset !== 0 && !slot.shifted;
        var name = slot.name || ('Slot ' + id);
        var isWinner = id === payload.winner;

        {{-- both bands carry every slot, so the eye compares like with like:
             a removed slot keeps its configured width but is hatched, and is
             simply absent from the band above it --}}
        var title = name + ' — ' + share.toFixed(2) + '% as configured';
        configBand += '<span class="' + (slot.shifted ? 'is-void' : (isWinner ? 'is-winner' : ''))
          + '" style="flex:' + Math.max(share, 0.4) + ' 0 0" title="' + esc(title) + '">'
          + label(share) + '</span>';

        if (!slot.shifted) {
          drawnBand += '<span class="' + (isWinner ? 'is-winner' : '')
            + '" style="flex:' + Math.max(drawShare, 0.4) + ' 0 0" title="'
            + esc(name + ' — ' + drawShare.toFixed(2) + '% of the draw') + '">'
            + label(drawShare) + '</span>';
        } else {
          removedNames.push(name);
        }

        {{-- the snapshot stores no per-slot multiplier, so the factor is what the
             draw actually applied: used / admin. Only the winner's multiplier row
             is recorded, so only it can be named. --}}
        var factor = altered && slot.admin > 0 ? round4(slot.used / slot.admin) : null;
        var reward = toArr(slot.vouchers).map(function (v) {
          return v.series + (v.system_status === 'active' ? '' : ' (' + v.system_status + ')');
        }).join(', ');

        var right;
        if (slot.shifted) {
          right = '<span class="odds-removed">removed</span>';
        } else {
          right = drawShare.toFixed(2) + '%';
          if (altered) {
            right += '<small class="odds-delta">'
              + (factor ? '×' + factor : 'changed') + '</small>';
          }
        }

        rows += '<div class="odds-row'
          + (isWinner ? ' is-winner' : '') + (slot.shifted ? ' is-void' : '') + '">'
          + '<span class="odds-slot"><b>' + esc(name) + '</b>'
          + (isWinner ? '<span class="odds-reward">won this spin</span>' : '')
          + '</span>'
          + '<span class="odds-reward">' + esc(reward) + '</span>'
          + '<span class="odds-figure">' + share.toFixed(2) + '%</span>'
          + '<span class="odds-figure">' + right + '</span>'
          + '</div>';
      });

      $('#odds-band-drawn').html(drawnBand);
      $('#odds-band-config').html(configBand);

      $('#odds-modal-note').text(removedNames.length
        ? removedNames.length + (removedNames.length === 1 ? ' slot was' : ' slots were')
          + ' removed before the draw (' + removedNames.join(', ')
          + '), so every remaining slot became more likely.'
        : 'Every configured slot was on the wheel.');

      $('#odds-modal-body').html(rows);
      $('#odds-modal').modal('show');
    });
  });
</script>
@endsection