@extends('layouts/base_view')
@section('title'){!! $variables['header_routes'] !!}@endsection
@section('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">
                            <i class="fas fa-chart-bar"></i> Laporan Reward Fulfillment
                        </h3>
                    </div>
                    <div class="card-body">
                        <form id="filter-form" class="mb-4">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Tanggal Mulai</label>
                                        <input type="date" name="start_date" id="start_date" class="form-control form-control-sm" 
                                            value="{{ date('Y-m-01') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Tanggal Akhir</label>
                                        <input type="date" name="end_date" id="end_date" class="form-control form-control-sm" 
                                            value="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Status</label>
                                        <select name="status" id="f-status" class="form-control form-control-sm">
                                            <option value="">Semua Status</option>
                                            <option value="pending">Pending</option>
                                            <option value="processing">Diproses</option>
                                            <option value="delivered">Terkirim</option>
                                            <option value="cancelled">Dibatalkan</option>
                                            <option value="failed">Gagal</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Sumber</label>
                                        <select name="source_type" id="f-source" class="form-control form-control-sm">
                                            <option value="">Semua Sumber</option>
                                            <option value="claim">Klaim Hadiah</option>
                                            <option value="point_redemption">Tukar Poin</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Metode Reward</label>
                                        <select name="reward_method" id="f-method" class="form-control form-control-sm">
                                            <option value="">Semua Metode</option>
                                            <option value="hadiah_langsung">Hadiah Langsung</option>
                                            <option value="undian">Undian</option>
                                            <option value="point_reward">Point Reward</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Delivery Method</label>
                                        <select name="delivery_method" id="f-delivery" class="form-control form-control-sm">
                                            <option value="">Semua</option>
                                            <option value="digital">Digital</option>
                                            <option value="pickup">Pickup</option>
                                            <option value="kurir">Kurir</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Operator</label>
                                        <select name="operator_code" id="f-operator" class="form-control form-control-sm">
                                            <option value="">Semua Operator</option>
                                            @foreach($operators as $op)
                                                <option value="{{ $op->operator_code }}">{{ $op->operator_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Provider Status</label>
                                        <select name="provider_status" id="f-provider-status" class="form-control form-control-sm">
                                            <option value="">Semua</option>
                                            <option value="00">Success (RC: 00)</option>
                                            <option value="68">Pending (RC: 68)</option>
                                            <option value="failed">Failed</option>
                                            <option value="not_sent">Belum Dikirim</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <div>
                                            <button type="button" id="btn-filter" class="btn btn-primary btn-sm">
                                                <i class="fas fa-filter"></i> Filter
                                            </button>
                                            <button type="button" id="btn-reset" class="btn btn-secondary btn-sm">
                                                <i class="fas fa-redo"></i> Reset
                                            </button>
                                            <button type="button" id="btn-export" class="btn btn-success btn-sm" data="download">
                                                <i class="fas fa-file-excel"></i> Export Excel
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <hr>

                        <!-- Summary Cards -->
                        <div class="row" id="summary-cards">
                            <div class="col-md-2">
                                <div class="small-box bg-info">
                                    <div class="inner">
                                        <h3 id="total-count">-</h3>
                                        <p>Total Transaksi</p>
                                    </div>
                                    <div class="icon"><i class="fas fa-list"></i></div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="small-box bg-warning">
                                    <div class="inner">
                                        <h3 id="pending-count">-</h3>
                                        <p>Pending</p>
                                    </div>
                                    <div class="icon"><i class="fas fa-clock"></i></div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="small-box bg-primary">
                                    <div class="inner">
                                        <h3 id="processing-count">-</h3>
                                        <p>Diproses</p>
                                    </div>
                                    <div class="icon"><i class="fas fa-spinner"></i></div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="small-box bg-success">
                                    <div class="inner">
                                        <h3 id="delivered-count">-</h3>
                                        <p>Terkirim</p>
                                    </div>
                                    <div class="icon"><i class="fas fa-check"></i></div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="small-box bg-danger">
                                    <div class="inner">
                                        <h3 id="failed-count">-</h3>
                                        <p>Gagal</p>
                                    </div>
                                    <div class="icon"><i class="fas fa-times"></i></div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="small-box bg-secondary">
                                    <div class="inner">
                                        <h3 id="cancelled-count">-</h3>
                                        <p>Dibatalkan</p>
                                    </div>
                                    <div class="icon"><i class="fas fa-ban"></i></div>
                                </div>
                            </div>
                        </div>

                        <!-- Data Table -->
                        <table id="id_data_table" class="table table-bordered table-striped table-sm">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Tanggal</th>
                                    <th>End User</th>
                                    <th>Promosi</th>
                                    <th>Sumber</th>
                                    <th>Metode</th>
                                    <th>Reward</th>
                                    <th>Nilai</th>
                                    <th>Status</th>
                                    <th>Delivery</th>
                                    <th>Provider Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(function() {
    var table = $('#id_data_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("reward-fulfillments.index") }}',
            data: function(d) {
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
                d.status = $('#f-status').val();
                d.source_type = $('#f-source').val();
                d.reward_method = $('#f-method').val();
                d.delivery_method = $('#f-delivery').val();
                d.operator_code = $('#f-operator').val();
                d.provider_status = $('#f-provider-status').val();
            }
        },
        columns: [
            {data:0, orderable:false, searchable:false},
            {data:8}, // created_at
            {data:1, orderable:false},
            {data:2},
            {data:null, orderable:false, render: function(data, type, row) {
                // Source type badge - assuming it's in the data
                return '<span class="badge badge-secondary">-</span>';
            }},
            {data:3, orderable:false},
            {data:4},
            {data:5, className:'text-right'},
            {data:6, orderable:false},
            {data:null, orderable:false, render: function(data, type, row) {
                // Delivery method - will be shown from actual data
                return '-';
            }},
            {data:7, orderable:false},
            {data:9, orderable:false, searchable:false, className:'text-center'},
        ],
        responsive: true,
        lengthChange: true,
        autoWidth: false,
        pageLength: 25,
        order: [[1, 'desc']],
        drawCallback: function(settings) {
            updateSummary();
        }
    });

    // Filter button
    $('#btn-filter').on('click', function() {
        table.draw();
    });

    // Reset button
    $('#btn-reset').on('click', function() {
        $('#filter-form')[0].reset();
        $('#start_date').val('{{ date("Y-m-01") }}');
        $('#end_date').val('{{ date("Y-m-d") }}');
        table.draw();
    });

    // Export button
    $('#btn-export').on('click', function() {
        var params = new URLSearchParams({
            start_date: $('#start_date').val(),
            end_date: $('#end_date').val(),
            status: $('#f-status').val(),
            source_type: $('#f-source').val(),
            reward_method: $('#f-method').val(),
            delivery_method: $('#f-delivery').val(),
            operator_code: $('#f-operator').val(),
            provider_status: $('#f-provider-status').val(),
        });
        
        window.location.href = '{{ route("reports.reward_fulfillment_export") }}?' + params.toString();
    });

    // Update summary cards
    function updateSummary() {
        var filters = {
            start_date: $('#start_date').val(),
            end_date: $('#end_date').val(),
            status: $('#f-status').val(),
            source_type: $('#f-source').val(),
            reward_method: $('#f-method').val(),
            delivery_method: $('#f-delivery').val(),
            operator_code: $('#f-operator').val(),
            provider_status: $('#f-provider-status').val(),
        };

        $.ajax({
            url: '{{ route("reports.reward_fulfillment_report_summary") }}',
            method: 'GET',
            data: filters,
            success: function(res) {
                $('#total-count').text(res.total.toLocaleString());
                $('#pending-count').text(res.pending.toLocaleString());
                $('#processing-count').text(res.processing.toLocaleString());
                $('#delivered-count').text(res.delivered.toLocaleString());
                $('#failed-count').text(res.failed.toLocaleString());
                $('#cancelled-count').text(res.cancelled.toLocaleString());
            }
        });
    }

    // Initial load
    updateSummary();
});
</script>
@endsection