@extends('layouts.admin')

@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>SMS Fallback Logs</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">SMS Fallback Logs</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <div class="info-box shadow">
          <span class="bg-success info-box-icon"><i class="fas fa-sms" aria-hidden="true"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">SMS sent</span>
            <span class="info-box-number" id="sms-consumption" aria-live="polite">&ndash;</span>
            <span class="text-muted small" id="sms-consumption-range"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">SMS sent when WhatsApp couldn't deliver a notification</h3>
          </div>
          <div class="card-body">
            <div class="row mb-3 align-items-end">
              <div class="col-sm-6 col-md-3 mb-2">
                <label for="status-filter">Status</label>
                <select id="status-filter" class="form-control">
                  <option value="">All statuses</option>
                  @foreach($statusOptions as $status => $label)
                  <option value="{{ $status }}">{{ $label }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-6 col-md-2 mb-2">
                <label for="date-from">From</label>
                <input type="date" id="date-from" class="form-control" value="{{ $defaultFrom }}" max="{{ $defaultTo }}">
              </div>
              <div class="col-6 col-md-2 mb-2">
                <label for="date-to">To</label>
                <input type="date" id="date-to" class="form-control" value="{{ $defaultTo }}" min="{{ $defaultFrom }}">
              </div>
              <div class="col-md-5 mb-2 d-flex align-items-end">
                <button type="button" id="filters-reset" class="btn btn-outline-secondary mr-2">Last 30 days</button>
                <a id="export-csv" class="btn btn-primary ml-auto" href="{{ route('admin.sms_fallback_logs.export') }}">
                  <i class="fas fa-file-csv mr-1" aria-hidden="true"></i>Export CSV
                </a>
              </div>
            </div>

            <div class="table-responsive">
              <table id="sms-fallback-logs-table" class="table table-bordered table-striped" width="100%">
                <thead>
                  <tr>
                    <th>Date</th>
                    <th>Member</th>
                    <th>WhatsApp Template</th>
                    <th>ES Template</th>
                    <th>Status</th>
                    <th>Reason</th>
                    <th>SMS Text</th>
                    <th>Trx ID</th>
                    <th>Reference</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('script')
<script>
  $(document).ready(function() {
    var exportUrl = "{{ route('admin.sms_fallback_logs.export') }}";
    var defaults = { from: "{{ $defaultFrom }}", to: "{{ $defaultTo }}" };

    function filters() {
      return { status: $('#status-filter').val(), from: $('#date-from').val(), to: $('#date-to').val() };
    }

    // "1 Oct 2026 to 31 Oct 2026", or "all dates" when a side is left empty.
    function rangeText(f) {
      var fmt = function (d) {
        return new Date(d + 'T00:00:00').toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
      };
      if (f.from && f.to) return fmt(f.from) + ' to ' + fmt(f.to);
      if (f.from) return 'Since ' + fmt(f.from);
      if (f.to) return 'Up to ' + fmt(f.to);
      return 'All dates';
    }

    function refresh() {
      var f = filters();
      // Keep the two inputs from crossing.
      $('#date-to').attr('min', f.from || null);
      $('#date-from').attr('max', f.to || null);
      $('#export-csv').attr('href', exportUrl + '?' + $.param(f));
      $('#sms-consumption-range').text(rangeText(f));
      table.draw();
    }

    var table = $('#sms-fallback-logs-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.sms_fallback_logs.index') }}",
            type: 'GET',
            data: function (d) {
                $.extend(d, filters());
            },
            dataSrc: function (json) {
                $('#sms-consumption').text(Number(json.consumption || 0).toLocaleString());
                return json.data;
            }
        },
        columns: [
            { data: 'created_at', name: 'created_at', searchable: false },
            { data: 'member', name: 'masked_mobile', orderable: false, searchable: false },
            { data: 'wa_template_slug', name: 'wa_template_slug', orderable: false },
            { data: 'template_slug', name: 'template_slug', orderable: false },
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { data: 'error', name: 'error', orderable: false, searchable: false },
            { data: 'content', name: 'content', orderable: false, searchable: false },
            { data: 'trx_id', name: 'trx_id', orderable: false },
            { data: 'reference', name: 'reference', orderable: false }
        ],
        order: [[0, 'desc']],
        pageLength: 25,
        responsive: true,
        language: {
            emptyTable: 'No SMS fallback requests in these dates. Widen the date range or choose all statuses.',
            zeroRecords: 'Nothing matches that search in these dates.'
        }
    });

    $('#status-filter, #date-from, #date-to').on('change', refresh);
    $('#filters-reset').on('click', function () {
      $('#status-filter').val('');
      $('#date-from').val(defaults.from);
      $('#date-to').val(defaults.to);
      refresh();
    });

    // First paint: link and range line match the prefilled inputs (the table loads on its own).
    $('#export-csv').attr('href', exportUrl + '?' + $.param(filters()));
    $('#sms-consumption-range').text(rangeText(filters()));
  });
</script>
@endsection