@extends('layouts.app')

@section('title', 'Wallet Histories List')

@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>Wallet History Management</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Wallet History Management</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 d-flex justify-content-end">
                        <a id="resetFilterBtn" class="btn btn-secondary mr-2">
                            <i class="fa fa-sync-alt"></i> Reset Filters
                        </a>
                        <a id="exportCsvBtn" class="btn btn-success">
                            <i class="fa fa-download"></i> Export CSV
                        </a>
                    </div>
                    <div class="card-body table-wrape">
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label>User</label>
                                <select id="filterUser" class="form-control filter-select">
                                    <option value="">All</option>
                                    @foreach ($users as $id => $name)
                                        <option value="{{ $id }}" 
                                            {{ isset($requestQueryParamUserId) && $id == $requestQueryParamUserId ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label>Transaction Type</label>
                                <select id="filterType" class="form-control filter-select">
                                    <option value="">All</option>
                                    <option value="credit">Credit</option>
                                    <option value="debit">Debit</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label>From Date</label>
                                <input type="date" id="filterFromDate" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label>To Date</label>
                                <input type="date" id="filterToDate" class="form-control">
                            </div>
                        </div>

                        <table id="walletHistoryTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Sr. No.</th>
                                    <th>User</th>
                                    <th>Booking Id</th>
                                    <th>Transaction Id</th>
                                    <th>Transaction Type</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Transaction Date</th>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script src="{{asset('js/custom.js')}}"></script>
<script>
    $(document).ready(function () {

        $('.filter-select').select2({
            placeholder: "Select an option",
            allowClear: true,
            width: '100%'
        });

        let table = $('#walletHistoryTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('wallethistory.list') }}",
                data: function (d) {
                    d.user_id = $('#filterUser').val();
                    d.type = $('#filterType').val();
                    d.from_date = $('#filterFromDate').val();
                    d.to_date = $('#filterToDate').val();
                }
            },
            columns: [
                { 
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                { 
                    data: 'user_name',
                    name: 'user_name' 
                },
                { 
                    data: 'booking_id',
                    name: 'booking_id' 
                },
                { 
                    data: 'transaction_id',
                    name: 'transaction_id' 
                },
                { 
                    data: 'type',
                    name: 'type'
                },
                { 
                    data: 'amount',
                    name: 'amount'
                },
                { 
                    data: 'status',
                    name: 'status'
                },
                { 
                    data: 'created_at',
                    name: 'created_at'
                },
            ],
            order: [[7, 'desc']]
        });

        // Filter triggers
        $('#filterUser, #filterType, #filterFromDate, #filterToDate').on('change', function () {
            table.ajax.reload();
        });

        // To Date min control
        $('#filterFromDate').on('change', function () {
            const fromDate = $(this).val();
            $('#filterToDate').attr('min', fromDate);
        });

        function getFilterParams() {
            return {
                user_id: $('#filterUser').val(),
                type: $('#filterType').val(),
                from_date: $('#filterFromDate').val(),
                to_date: $('#filterToDate').val(),
                search: $('.dataTables_filter input').val(),
            };
        }

        function exportWalletHistory() {
            let params = getFilterParams();
            const url = "{{ route('wallethistory.export') }}";
            const queryString = new URLSearchParams(params).toString();
            window.open(url + '?' + queryString, '_blank');
        }

        function resetFilters() {
            $('#filterUser').val('');
            $('#filterType').val('');
            $('#filterFromDate').val('');
            $('#filterToDate').val('');
            $('#filterToDate').removeAttr('min');
            table.ajax.reload();
        }

        $('#exportCsvBtn').on('click', function () {
            exportWalletHistory();
        });

        $('#resetFilterBtn').on('click', function () {
           resetFilters(); 
        });
    });
</script>
@endsection