@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">
                        <div class="row">
                            <div class="col-md-2">
                                <select id="filter-status" class="form-control">
                                    <option value="">All Status</option>
                                    @foreach($statuses as $key => $status)
                                        <option value="{{ $key }}">{{ $status }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select id="filter-promotion" class="form-control">
                                    <option value="">All Promotions</option>
                                    @foreach($promotions as $promotion)
                                        <option value="{{ $promotion->id }}">{{ $promotion->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="date" id="filter-date-from" class="form-control" placeholder="From Date">
                            </div>
                            <div class="col-md-2">
                                <input type="date" id="filter-date-to" class="form-control" placeholder="To Date">
                            </div>
                            <div class="col-md-3" style="display:none;">
                                <button type="button" class="btn btn-primary" onclick="bulkProcessModal()">
                                    <i class="fas fa-cogs"></i> Bulk Process
                                </button>
                                <button type="button" class="btn btn-info" onclick="showStats()">
                                    <i class="fas fa-chart-bar"></i> Statistics
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="id_data_table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th width="5%">
                                        <input type="checkbox" id="select-all">
                                    </th>
                                    <th width="5%">No</th>
                                    <th>IMEI</th>
                                    <th>User</th>
                                    <th>Promotion</th>
                                    <th>Device Model</th>
                                    <th>Status</th>
                                    <th>Reward</th>
                                    <th>Claimed At</th>
                                    <th>Processed At</th>
                                    <th scope="col" width="10%" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Bulk Process Modal -->
<div class="modal fade" id="bulkProcessModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Process Claims</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="bulk-process-form">
                    <div class="form-group">
                        <label>Action</label>
                        <select name="action" class="form-control" required>
                            <option value="">Select Action</option>
                            <option value="approve">Approve Selected</option>
                            <option value="reject">Reject Selected</option>
                            <option value="process_auto">Process Automatically</option>
                        </select>
                    </div>
                    <div class="form-group" id="rejection-reason-group" style="display: none;">
                        <label>Rejection Reason</label>
                        <textarea name="rejection_reason" class="form-control" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="processBulk()">Process</button>
            </div>
        </div>
    </div>
</div>

<!-- Approve Modal -->
<div class="modal fade" id="approveModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Approve Claim</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to approve this claim?</p>
                <form id="approve-form">
                    <div class="form-group">
                        <label>Additional Reward Data (Optional)</label>
                        <textarea name="reward_data" class="form-control" rows="3" placeholder="JSON format for additional reward data"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" onclick="confirmApprove()">Approve</button>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Claim</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="reject-form">
                    <div class="form-group">
                        <label>Rejection Reason *</label>
                        <textarea name="rejection_reason" class="form-control" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="confirmReject()">Reject</button>
            </div>
        </div>
    </div>
</div>

<!-- Statistics Modal -->
<div class="modal fade" id="statsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Claims Statistics</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="stats-content">
                <!-- Statistics will be loaded here -->
            </div>
        </div>
    </div>
</div>

<script>
$(function() {
    let currentClaimId = null;
    
    var table = $('#id_data_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("claims.index") }}',
            data: function(d) {
                d.status = $('#filter-status').val();
                d.promotion_id = $('#filter-promotion').val();
                d.date_from = $('#filter-date-from').val();
                d.date_to = $('#filter-date-to').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return '<input type="checkbox" class="claim-checkbox" value="' + row[0] + '">';
                }
            },
            { data: 0, name: 'no', orderable: false, searchable: false },
            { data: 1, name: 'imei' },
            { data: 2, name: 'user' },
            { data: 3, name: 'promotion' },
            { data: 4, name: 'device_model' },
            { data: 5, name: 'status' },
            { data: 6, name: 'reward' },
            { data: 7, name: 'claimed_at' },
            { data: 8, name: 'processed_at' },
            { data: 9, name: 'action', orderable: false, searchable: false, className: 'text-center' }
        ],
        "responsive": true,
        "lengthChange": true,
        "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"],
        drawCallback: function(settings) {
            $('[data-toggle="tooltip"]').tooltip();
        }
    });

    table.buttons().container().appendTo('#id_data_table_wrapper .col-md-6:eq(0)');

    // Filter event handlers
    $('#filter-status, #filter-promotion, #filter-date-from, #filter-date-to').change(function() {
        table.draw();
    });

    // Select all checkbox
    $('#select-all').change(function() {
        $('.claim-checkbox').prop('checked', this.checked);
    });

    // Bulk process action change
    $('select[name="action"]').change(function() {
        if ($(this).val() === 'reject') {
            $('#rejection-reason-group').show();
        } else {
            $('#rejection-reason-group').hide();
        }
    });

    // Global functions
    window.approveClaim = function(claimId) {
        currentClaimId = claimId;
        $('#approveModal').modal('show');
    };

    window.rejectClaim = function(claimId) {
        currentClaimId = claimId;
        $('#rejectModal').modal('show');
    };

    window.processAuto = function(claimId) {
        if (confirm('Are you sure you want to process this claim automatically?')) {
            $.post('{{ route("claims.process-auto", ":id") }}'.replace(':id', claimId), {
                _token: '{{ csrf_token() }}'
            }).done(function(response) {
                if (response.success) {
                    alert(response.message);
                    table.draw();
                } else {
                    alert('Error: ' + response.message);
                }
            });
        }
    };

    window.confirmApprove = function() {
        const rewardData = $('textarea[name="reward_data"]').val();
        
        $.post('{{ route("claims.approve", ":id") }}'.replace(':id', currentClaimId), {
            reward_data: rewardData ? JSON.parse(rewardData) : null,
            _token: '{{ csrf_token() }}'
        }).done(function(response) {
            if (response.success) {
                alert(response.message);
                $('#approveModal').modal('hide');
                table.draw();
            } else {
                alert('Error: ' + response.message);
            }
        });
    };

    window.confirmReject = function() {
        const reason = $('#reject-form textarea[name="rejection_reason"]').val();
        
        if (!reason) {
            alert('Rejection reason is required');
            return;
        }
        
        $.post('{{ route("claims.reject", ":id") }}'.replace(':id', currentClaimId), {
            rejection_reason: reason,
            _token: '{{ csrf_token() }}'
        }).done(function(response) {
            if (response.success) {
                alert(response.message);
                $('#rejectModal').modal('hide');
                table.draw();
            } else {
                alert('Error: ' + response.message);
            }
        });
    };

    window.bulkProcessModal = function() {
        const selected = $('.claim-checkbox:checked').length;
        if (selected === 0) {
            alert('Please select at least one claim');
            return;
        }
        $('#bulkProcessModal').modal('show');
    };

    window.processBulk = function() {
        const selected = $('.claim-checkbox:checked').map(function() {
            return this.value;
        }).get();
        
        const formData = {
            claim_ids: selected,
            action: $('select[name="action"]').val(),
            rejection_reason: $('textarea[name="rejection_reason"]').val(),
            _token: '{{ csrf_token() }}'
        };
        
        $.post('{{ route("claims.bulk-process") }}', formData).done(function(response) {
            if (response.success) {
                alert(response.message);
                $('#bulkProcessModal').modal('hide');
                table.draw();
            } else {
                alert('Error: ' + response.message);
            }
        });
    };

    window.showStats = function() {
        const promotionId = $('#filter-promotion').val();
        
        $.get('{{ route("claims.stats") }}', { promotion_id: promotionId }).done(function(data) {
            const html = `
                <div class="row">
                    <div class="col-md-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-info"><i class="fas fa-clipboard-list"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Total Claims</span>
                                <span class="info-box-number">${data.total_claims}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-warning"><i class="fas fa-clock"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Pending</span>
                                <span class="info-box-number">${data.pending_claims}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-success"><i class="fas fa-check"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Approved</span>
                                <span class="info-box-number">${data.approved_claims}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-danger"><i class="fas fa-times"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Rejected</span>
                                <span class="info-box-number">${data.rejected_claims}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            $('#stats-content').html(html);
            $('#statsModal').modal('show');
        });
    };
});
</script>
@endsection