@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>Subscription Transaction 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">Subscription Transaction 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">
                    @if($hasActiveSubscription || $isSuperAdmin)
                        <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>
                    @endif
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            @if($users)
                            <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>
                            @endif
                            <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_purchase_subscriptions') as $key => $status)
                                    <option value="{{ $key }}"
                                        {{ (isset($requestQueryParamStatus) && $key == $requestQueryParamStatus) ? 'selected' : '' }}>
                                        {{ ucfirst($status) }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="subscriptionTransactionTable" class="table table-bordered table-striped text-nowrap text-center">
                                <thead>
                                    <tr>
                                        <th>Sr. No.</th>
                                        @if(auth()->user()->user_type != 'vendor')
                                        <th>Vendor Name</th>
                                        @endif
                                        <th>Plan</th>
                                        <th>Invoice Id</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Transaction Date</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="user_type" id="user_type" value="{{ Auth::user()->user_type }}">
    </div>
</section>
@endsection

@section('scripts')
<script src="{{asset('js/custom.js')}}"></script>
<script>
    let listUrl = "{{ route('subscriptiontransaction.list') }}";
    if ($('#user_type').val() == 'vendor') {
        listUrl = "{{ route('vendor.subscriptiontransaction.list') }}"
    }
    $(document).ready(function() {

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

        let table = $('#subscriptionTransactionTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: listUrl,
                data: function(d) {
                    d.vendor_id = $('#filterUser').val();
                    d.from_date = $('#filterFromDate').val();
                    d.to_date = $('#filterToDate').val();
                    d.status = $('#filterStatus').val();
                }
            },
            columns: [{
                    data: 'purchase_subscription_id',
                    name: 'purchase_subscription_id',
                },
                @if(auth()->user()-> user_type != 'vendor') {
                    data: 'vendor.name',
                    name: 'vendor.name'
                },
                @endif
                {
                    data: 'plan_name',
                    name: 'plan_name',

                },
                {
                    data: 'invoice_id',
                    name: 'invoice_id',
                    // orderable: false,
                },
                {
                    data: 'price',
                    name: 'price',
                },
                {
                    data: 'status',
                    name: 'status',

                },
                {
                    data: 'created_at',
                    name: 'created_at',

                },
            ],
            order: [
                [0, '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 {
                vendor_id: $('#filterUser').val(),
                from_date: $('#filterFromDate').val(),
                to_date: $('#filterToDate').val(),
                status: $('#filterStatus').val(),
                search: $('.dataTables_filter input').val(),
            };
        }

        function exportSubscriptionTransaction() {
            let exportUrl = "{{ route('subscriptiontransaction.export') }}";
            if ($('#user_type').val() == 'vendor') {
                exportUrl = "{{ route('vendor.subscriptiontransaction.export') }}"
            }
            let params = getFilterParams();
            const queryString = new URLSearchParams(params).toString();
            window.open(exportUrl + '?' + queryString, '_blank');
        }

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

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

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