@extends('template.layouts.template-base')
@section('title', 'PhonePe Payments')

@section('styles')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
  <style>
    .page-content {
      background-color: #F0F4F8 !important;
      padding: 80px 10px;
    }

    .tab-filters .tab-btn.active {
      background: #0040a0 !important;
      color: #fff !important;
    }
    /* ── PHONEPE HEADER ── */
    .pp-header {
      background: linear-gradient(135deg, #3b1276 0%, #5f259f 55%, #8b3fd6 100%);
      border-radius: 16px;
      padding: 24px 28px;
      margin-bottom: 20px;
      color: white;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(95,37,159,0.25);
    }
    .pp-header::before { content:''; position:absolute; top:-60px; right:-40px; width:200px; height:200px; background:rgba(255,255,255,0.06); border-radius:50%; }
    .pp-header::after  { content:''; position:absolute; bottom:-30px; right:100px; width:100px; height:100px; background:rgba(255,255,255,0.04); border-radius:50%; }
    .pp-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
    .pp-logo-mark { background:white; color:#5f259f; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; font-family:'Playfair Display',serif; }
    .pp-logo-txt { font-family:'Playfair Display',serif; font-size:18px; font-weight:800; }
    .pp-logo-sub { font-size:11px; opacity:0.65; }
    .pp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
    .pp-stat-lbl { font-size:11px; opacity:0.65; text-transform:uppercase; letter-spacing:1px; }
    .pp-stat-val { font-family:'Playfair Display',serif; font-size:24px; font-weight:800; margin-top:5px; }
    .pp-stat-val.warn { color:#fcd34d; }
  </style>

@endsection

@section('content')
  <section class=" add-service order-page">
    <!-- Header -->
    <div class="page-header">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col">
            <div class="page-title">
              <a href="{{ route('backend.payments.index') }}">Payments / <span class="breadcrumb-link">PhonePe Status</span></a>
            </div>
          </div>
          <div class="col-auto cate-top-btns">
            <div class="action-buttons d-none" id="bulkActions">
              <button class="btn download-btn">
                <img src="{{ asset('assets/template/images/file-pdf-1.png') }}" alt="Cattle Feed" class="file-pdf-img" />
                Download Invoice
              </button>
           
            </div>
          
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid order-table-sec ">
      <div class="content-wrapper">
        <div class="pp-header">
          <div class="pp-logo-row">
            <div class="pp-logo-mark">Pe</div>
            <div>
              <div class="pp-logo-txt">PhonePe Payments</div>
            </div>
          </div>
          <div class="pp-stats">
            <div>
              <div class="pp-stat-lbl">Today's Collection</div>
              <div class="pp-stat-val">₹{{ number_format($stats['today_collection'], 2) }}</div>
            </div>
            <div>
              <div class="pp-stat-lbl">Successful Txns</div>
              <div class="pp-stat-val">{{ $stats['successful_txns'] }}</div>
            </div>
            <div>
              <div class="pp-stat-lbl">Pending Settlement</div>
              <div class="pp-stat-val">₹{{ number_format($stats['pending_settlement'], 2) }}</div>
            </div>
            <div>
              <div class="pp-stat-lbl">Failed Txns</div>
              <div class="pp-stat-val warn">{{ $stats['failed_txns'] }}</div>
            </div>
          </div>
        </div>
        
        <div class="col-lg-12 col-sm-12">
          {{-- Filters --}}
          <div class="d-flex flex-wrap gap-2 mb-3 align-items-center justify-content-between">

              {{-- Status Tabs --}}
              <div class="tab-filters">
                  <button class="tab-btn active" data-status="">All Payments</button>
                  <button class="tab-btn" data-status="successful">✅ Successful</button>
                  <button class="tab-btn" data-status="pending">⏳ Pending</button>
                  <button class="tab-btn" data-status="failed">❌ Failed</button>
                  <button class="tab-btn" data-status="refunded">🔄 Refunded</button>
              </div>

              {{-- Period + Download --}}
              <div class="d-flex gap-2">
                  <button class="btn btn-outline-secondary btn-sm period-btn active" data-period="today">Today</button>
                  <button class="btn btn-outline-secondary btn-sm period-btn" data-period="week">This Week</button>
                  <button class="btn btn-outline-secondary btn-sm period-btn" data-period="month">This Month</button>
                  <a href="{{ route('backend.payments.download') }}" id="downloadBtn" class="btn btn-primary btn-sm">
                      ⬇ Download
                  </a>
              </div>
          </div>
        </div>
       
        <div class="card-body">
          <div class="table-responsive">
            <table id="paymentsTable" class="table mb-0">
              <thead>
                  <tr>
                    <th>Transaction ID</th>
                    <th>Order ID</th>
                    <th>Customer</th>
                    <th>Amount</th>
                    <th>Method</th>
                    <th>Status</th>
                    <th>Failure Reason</th>
                    <th>Time</th>
                    <th>Action</th>
                  </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection
@section('scripts')
<script>
  $(function () {

    var table = $('#paymentsTable').DataTable({
        processing: true,
        serverSide: true,
        ordering:   false,
        ajax: {
            url: '{{ route("backend.payments.index") }}',
            data: function (d) {
                d.status = $('.tab-btn.active').data('status') || '';
                d.period = $('.period-btn.active').data('period') || 'today';
            }
        },
        columns: [
            { data: 'transaction_id', name: 'transaction_id' },
            { data: 'order',          name: 'order' },
            { data: 'customer',       name: 'customer' },
            { data: 'amount',         name: 'amount' },
            { data: 'method',         name: 'method' },
            { data: 'status',         name: 'status' },
            { data: 'failure_reason', name: 'failure_reason' },
            { data: 'time',           name: 'time' },
            { data: 'action',         name: 'action' },
        ]
    });

    // Status tab filter
    $(document).on('click', '.tab-btn', function () {
        $('.tab-btn').removeClass('active');
        $(this).addClass('active');
        table.ajax.reload();
    });

    // Period filter
    $(document).on('click', '.period-btn', function () {
        $('.period-btn').removeClass('active');
        $(this).addClass('active');

        // Update download link with period
        var period = $(this).data('period');
        $('#downloadBtn').attr('href', '{{ route("backend.payments.download") }}?period=' + period);

        table.ajax.reload();
    });

});
</script>
@endsection