@extends('layouts.app')

@section('title', 'Payment 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>Payment 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">Payment 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">
                        <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>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 class="col-md-3">
                                <label>Status</label>
                                <select id="filterStatus" class="form-control filter-select">
                                    <option value="">All</option>
                                    @foreach(config('constant.status_of_payment_status') as $key => $value)
                                        <option value="{{ $key }}"
                                            {{ isset($requestQueryParamStatus) && $key == $requestQueryParamStatus ? 'selected' : '' }}>
                                            {{ $value }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="paymentHistoryTable" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>User</th>
                                        <th>Booking Id</th>
                                        <th>Payment 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>
    </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 = $('#paymentHistoryTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('paymenthistory.list') }}",
                data: function (d) {
                    d.user_id = $('#filterUser').val();
                    d.from_date = $('#filterFromDate').val();
                    d.to_date = $('#filterToDate').val();
                    d.status = $('#filterStatus').val();
                }
            },
            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'booking.user.name',
                    name: 'booking.user.name',
                },
                {
                    data: 'booking_id',
                    name: 'booking_id',
                },
                {
                    data: 'transaction_id',
                    name: 'transaction_id',
                },
                {
                    data: 'payment_method',
                    name: 'payment_method',
                },
                {
                    data: 'amount',
                    name: 'amount',
                },
                {
                    data: 'payment_status',
                    name: 'payment_status',
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                },
            ],
            order: [[7, 'desc']]
        });

        // Filter triggers
        $('#filterUser, #filterFromDate, #filterToDate, #filterStatus').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(),
                from_date: $('#filterFromDate').val(),
                to_date: $('#filterToDate').val(),
                status: $('#filterStatus').val(),
                search: $('.dataTables_filter input').val(),
            };
        }

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

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

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

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