@extends('admin.layouts.app')
@section('title')
    Payment List
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        {{-- <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex">
                                <h3 class="card-title line-height-36 " >Payment List ({{ @$allPayments }})</h3>
                            </div>
                        </div> --}}

                        <div class="d-flex align-items-center justify-content-between">
                            <h3 class="card-title line-height-36 ">Payment List ({{ @$allPayments }})</h3>
                            <div class="d-flex align-items center">
                                @if (auth()->user()->can('payment.create'))
                                    <a href=""
                                        class="btn bg-primary float-right d-flex align-items-center justify-content-center ml-2"
                                        data-toggle="modal" data-target="#modalPaymentCreateForm"><i
                                            class="fas fa-plus mr-1"></i>
                                        {{ __('create') }}</a>
                                @endif

                            </div>
                        </div>


                        <form id="formSubmit" action="{{ route('admin.payment.index') }}" method="GET">
                            <div class="row p-1 mt-2 mx-2">
                                <div class="col-md-2 dropdown">
                                    {{-- <x-forms.input type="date" name="created_at" placeholder="Enter Created Date"
                                        value="{{ old('created_at', request('created_at')) }}" /> --}}
                                    <input type="text" id="created_at" name="created_at"
                                        value="{{ request('created_at') }}" class="form-control" autocomplete="off"
                                        id="my_txtbox" placeholder="Date Range" readonly />
                                    <x-forms.error name="created_at" />
                                </div>

                                <div class="col-md-2 dropdown">
                                    <select name="candidate_id" id="candidate_id" class="form-control select2candidate">
                                        <option value="">Select Candidate</option>
                                    </select>
                                </div>

                                <div class="col-md-1 dropdown">
                                    <select name="status" class="form-control select2bs4" id="status">
                                        <option value="" class="d-none">
                                            Select Status
                                        </option>
                                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid
                                        </option>
                                        <option value="unpaid" {{ request('status') == 'unpaid' ? 'selected' : '' }}>Unpaid
                                        </option>
                                        <option value="partial" {{ request('status') == 'partial' ? 'selected' : '' }}>
                                            partial</option>

                                    </select>
                                </div>
                                <div class="col-md-2 dropdown">
                                    <select name="plan" class="form-control select2bs4" id="plan">
                                        <option value="" >
                                            Select Package (Plan) 
                                        </option>
                                        @foreach($plans as $plan)
                                            <option value="{{@$plan['id']}}" {{ request('plan') == @$plan['id'] ? 'selected' : '' }}>{{@$plan['title']}} ({{@$plan['id']}})  </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-1 dropdown">
                                    <select name="perPage" class="form-control select2bs4" onchange="this.form.submit()">
                                        <option value="10" {{ request('perPage') == 10 ? 'selected' : '' }}>10</option>
                                        <option value="20" {{ request('perPage') == 20 ? 'selected' : '' }}>20</option>
                                        <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ request('perPage') == 100 ? 'selected' : '' }}>100
                                        </option>
                                        <option value="500" {{ request('perPage') == 500 ? 'selected' : '' }}>500
                                        </option>
                                        {{-- <option value="All" {{ request('perPage') == "All" ? 'selected' : '' }}>All</option> --}}
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <input type="text"
                                        @if (request('Keyword')) value="{{ request('Keyword') }}" @endif
                                        id="Keyword" class="form-control mr-2" placeholder="{{ __('search') }}..."
                                        name="Keyword" aria-label="">
                                </div>


                                {{-- <div class="col-md-1">
                                </div>     --}}
                                <div class="col-md-2">
                                    @if (userCan('payment.export'))
                                        {{-- <a href="{{ route('admin.payment.export', request()->all()) }}"
                                            class="btn ml-2 btn-success float-right"><i class="fas fa-download"></i>
                                            Export</a> --}}
                                        <a href="#" class="btn ml-2 btn-success float-right" id="exportButton">
                                            <i class="fas fa-download"></i> Export
                                        </a>
                                    @endif
                                    <button type="submit" class="btn btn-primary float-right"><i class="fas fa-search"></i>
                                        {{ __('search') }}</button>
                                    @if (request('Keyword') || request('status') || request('candidate_id') || request('created_at') || request('plan'))
                                        <a href="{{ route('admin.payment.index') }}"
                                            class="btn btn-danger float-right mr-2">
                                            <i class="fas fa-times"></i> Clear</a>
                                    @endif
                                </div>



                            </div>
                        </form>
                        {{-- <button type="button" class="btn btn-success float-right col-md-1" id="exportButton">Export</button> --}}
                        {{-- <a href="{{ route('admin.payment.export', request()->all()) }}" class="btn btn-success float-right"><i class="fas fa-download"></i> Export</a> --}}
                        {{-- <div class="col-md-1 d-flex inline">
                            <button type="button" class="btn btn-success" id="exportButton">Export</button>
                            <a herf="javascript:void(0)" class="btn btn-sm btn-success" id="exportButton">Export</a>
                        </div> --}}


                    </div>

                    <div class="card-body table-responsive p-0">
                        <table class="table table-hover text-nowrap">
                            <thead>
                                <tr>
                                    <th width="5%">#</th>
                                    <th>Transaction ID</th>
                                    <th>OrderID</th>
                                    <th>Package Name</th>                                  
                                    <th>Candidate Name</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Payment Gateway</th>
                                    <th>Payment Mode</th>
                                    <th>Invoice Number</th>
                                    <th>Date</th>
                                    <th>Created By</th>
                                    

                                    @if (userCan('payment.edit') || userCan('payment.delete'))
                                        <th width="10%">{{ __('action') }}</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($payments as $payment)
                                    <tr>
                                        <td>{{ $payment->id }}</td>
                                        <td>{{ $payment->transaction_id }}</td>
                                        <td>{{ $payment->order_id }}</td>
                                        <td>{{ $payment->order->plan->title ?? "--" }} ({{ $payment->order->plan->id ?? "--" }})</td>
                                        <td>
                                            @if (@$payment->candidate->id && @$payment->candidate->user->id)
                                                <a target="_blank"
                                                    href="{{ route('lead-management.edit', @$payment->candidate->id) }}"
                                                    class="link">
                                                    {{ @$payment->candidate->user->name }}
                                                    ({{ @$payment->candidate->user->id }})
                                                </a>
                                            @else
                                                {{ @$payment->candidate->user->name }}
                                                ({{ @$payment->candidate->user->id ?? @$payment->candidate_id }})
                                            @endif
                                        </td>
                                        <td>{{ @$payment->currency_symbol }} {{ @$payment->amount }}</td>
                                        <td>{{ $payment->payment_status ?? '--' }}</td>
                                        <td>{{ @$payment->payment_gateway->name ?? $payment->payment_gateway_id }}</td>
                                        <td>{{ $payment->payment_mode ?? '--' }}</td>
                                        <td>{{ $payment->invoice_number ?? '--' }}</td>
                                        <td>
                                            @if (!empty($payment->created_at))
                                                {{ dateMonthTimeFormat(@$payment->created_at) }}
                                            @else
                                                --
                                            @endif
                                        </td>
                                        <td>{{ ucwords(adminIdToNameGet(@$payment->created_by)) }} </td>


                                        <td>
                                            {{-- @if (userCan('payment.edit'))
                                            <a href="{{ route('admin.payment.edit', $payment->id) }}" class="btn bg-info"><i
                                                    class="fas fa-edit"></i></a>
                                            @endif   --}}
                                            @if (userCan('payment.delete'))
                                            <form action="{{ route('admin.payment.destroy', $payment->id) }}" method="POST"
                                                class="d-inline">
                                                @method('DELETE')
                                                @csrf
                                                {{-- <button
                                                    onclick="return confirm(__('are_you_sure_want_to_delete_this_item'));"
                                                    class="btn bg-danger"><i class="fas fa-trash"></i></button> --}}
                                                    <button data-toggle="tooltip" data-placement="top"
                                                    title="{{ __('delete') }}"
                                                    onclick="return confirm('{{ __('are_you_sure_you_want_to_delete_this_item') }}');"
                                                    class="btn bg-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                            @endif
                                        </td>


                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10">
                                            <p>{{ __('no_data_found') }}...</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                        @if ($payments instanceof \Illuminate\Pagination\LengthAwarePaginator)
                            <div class="mt-3 d-flex justify-content-center">
                                {{ $payments->links() }}
                            </div>
                        @endif


                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalPaymentCreateForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="myForm" class="form-horizontal" action="{{ route('admin.payment.store') }}" method="POST" onsubmit="validateForm(event)">
                    @csrf
                    <div class="modal-header text-center">
                        <h4 class="modal-title w-100 font-weight-bold">Payment</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body mx-3">
                        <div class="row">
                            <div class="col-6 dropdown">
                                <label data-error="wrong" data-success="right" for="order_id">Order Id</label>
                                <select name="order_id" id="order_id" class="select2orders">
                                    <option value="">Select Order</option>
                                </select>
                                <span class="text-danger" id="order_id-text-danger"></span>
                            </div>
                            <div class="col-6">
                                <label data-error="wrong" data-success="right" for="transaction_id">Transaction
                                    Id</label>
                                <input type="text" id="transaction_id" class="form-control mr-2"
                                    placeholder="Transaction Id" name="transaction_id" aria-label="">
                                <span class="text-danger" id="transaction_id-text-danger"></span>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-6">
                                <label data-error="wrong" data-success="right" for="payment_gateway_id">Payment
                                    Gateway</label>
                                <select name="payment_gateway_id" id="payment_gateway_id" class="form-control validate select2bs4Pop">
                                    <option value="" class="d-none">
                                        Select Payment Gateway
                                    </option>
                                    @foreach ($paymentGateways as $item)
                                        <option {{ old('payment_gateway_id') == $item['id'] ? 'selected' : '' }}
                                            value="{{ $item['id'] }}">{{ $item['name']}}</option>
                                    @endforeach
                                  
                                </select>
                                <span class="text-danger" id="payment_gateway_id-text-danger"></span>
                            </div>
                            <div class="col-6">
                                <label data-error="wrong" data-success="right" for="payment_status">Payment
                                    Status</label>
                                <select name="payment_status" id="payment_status" class="form-control validate select2bs4Pop">
                                    <option value="" class="d-none">
                                        Select Status
                                    </option>
                                    <option value="paid" {{ old('payment_status') == 'paid' ? 'selected' : '' }}>Paid
                                    </option>
                                    <option value="unpaid" {{ old('payment_status') == 'unpaid' ? 'selected' : '' }}>Unpaid
                                    </option>
                                    <option value="partial" {{ old('payment_status') == 'partial' ? 'selected' : '' }}>
                                        partial</option>
                                </select>
                                <span class="text-danger" id="payment_status-text-danger"></span>
                            </div>


                        </div>

                        <div class="row">

                            <div class="col-6">
                                <label data-error="wrong" data-success="right" for="payment_mode">Payment Mode</label>
                                <input type="text" id="payment_mode" class="form-control mr-2"
                                    placeholder="Payment Mode" name="payment_mode" aria-label="">
                                <span class="text-danger" id="payment_mode-text-danger"></span>
                            </div>
                            <div class="col-6">
                                <label data-error="wrong" data-success="right" for="invoice_number">Invoice
                                    Number</label>
                                <input type="text" id="invoice_number" class="form-control mr-2"
                                    placeholder="Invoice Number" name="invoice_number" aria-label="">
                                <span class="text-danger" id="invoice_number-text-danger"></span>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-6">
                                <label data-error="wrong" data-success="right" for="currency_symbol">Currency
                                    Symbol</label>
                                <input type="text" id="currency_symbol" class="form-control mr-2"
                                    placeholder="Currency Symbol" name="currency_symbol" aria-label="" value="INR"
                                    readonly>
                                <span class="text-danger"  id="currency_symbol-text-danger"></span>
                            </div>
                            <div class="col-6">
                                <label data-error="wrong" data-success="right"
                                    for="amount">{{ __('amount') }}</label>
                                <input type="number" id="amount" class="form-control mr-2"
                                    placeholder="{{ __('amount') }} (ex:99.00)" name="amount" aria-label="" step="any">
                                <span class="text-danger" id="amount-text-danger"></span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-6">
                                <label data-error="wrong" data-success="right" for="datetime">Date and
                                    Time</label>
                                <input type="text" id="datetime" name="datetime" autocomplete="off"
                                    class="form-control validate" value="">
                                    <span class="text-danger" id="datetime-text-danger"></span>
                            </div>
                        </div>

                    </div>

                    <div class="modal-footer d-flex justify-content-center">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-paper-plane-o ml-1"></i> {{ __('save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('style')
    <link href="{{ asset('path-to-your-font-awesome-css/all.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }

        .btn-heigth {
            height: 42px;
        }
    </style>
@endsection
@section('script')
    <script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="{{ asset('frontend/secondary-theme/assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>

    <script>
        $(document).ready(function() {

       
        $('input[name="datetime"]').daterangepicker({
        autoUpdateInput: false,
        timePicker: true,
        locale: {
        format: 'M/DD hh:mm:ss A'
        },
        drops: 'up',
        timePickerIncrement: 1,
        singleDatePicker: true,
        showDropdowns: true, // Add this line to show year and month dropdowns
        maxDate: new Date(),
        });

        $('input[name="datetime"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' ' + picker.endDate.format('hh:mm:ss A'));
        });

            var candidateId = '{{ request('candidate_id') }}';

            $('.select2candidate').select2({
                theme: 'bootstrap4',
                ajax: {
                    url: '{{ route('order.searchCandidate') }}',
                    dataType: 'json',
                    type: "GET",
                    quietMillis: 50,
                    data: function(term) {
                        console.log('item', term);
                        return {
                            term: term,
                        };
                    },
                    processResults: function(data) {
                        console.log('data', data)
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    id: item.id,
                                    text: `${item.name} (${item.user_id})`
                                }
                            })
                        };
                    }
                }
            });

            $('.select2orders').select2({
                theme: 'bootstrap4',
                minimumInputLength: 1,
                dropdownParent: $('#modalPaymentCreateForm'), // Allow dropdown to show even with one character
                ajax: {
                    url: '{{ route('order.searchOrder') }}',
                    dataType: 'json',
                    type: 'GET',
                    quietMillis: 50,
                    data: function(term) {
                        console.log('item', term);
                        return {
                            term: term,
                        };
                    },
                    processResults: function(data) {
                        console.log('data', data);
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    id: item.id,
                                    text: `${item.name} (${item.id})`
                                }
                            })
                        };
                    }
                }
            });



            if (candidateId) {
                $.ajax({
                    url: '{{ route('order.searchCandidate') }}',
                    type: "GET",
                    dataType: 'json',
                    data: {
                        id: candidateId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(item) {
                        console.log(item);
                        $('.select2candidate').append(new Option(`${item.name} (${item.id})`, item.id,
                            true, true)).trigger('change');
                    }
                });
            }

            $('.select2bs4').select2({
                theme: 'bootstrap4',
                minimumResultsForSearch: 8,
            })

            $('.select2bs4Pop').select2({
                theme: 'bootstrap4',
                minimumResultsForSearch: 8,
                dropdownParent: $('#modalPaymentCreateForm'),
            })

            


        });

        $('input[name="created_at"]').daterangepicker({
            autoUpdateInput: false,
            // maxDate: new Date(),
            locale: {
                cancelLabel: 'Clear'
            }
        });
        $('input[name="created_at"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                'MM/DD/YYYY'));
        });

        $('input[name="created_at"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });

      
    </script>

    <script>
        // $(document).ready(function() {
        //     // Export button click event
        //     $('#exportButton').click(function() {

        //         // Get the filter criteria from the form
        //         var formData = $('#formSubmit').serialize();

        //         // Perform an AJAX GET request to export the data
        //         $.ajax({
        //             type: "GET",
        //             dataType: "json",
        //             url: "{{ route('admin.payment.export') }}",
        //             data: formData,
        //             success: function(response) {
        //                 // Redirect to the download URL
        //                 toastr.success(response.message, 'Success');
        //                 window.location.href = response.url;

        //             },
        //             error: function(xhr, status, error) {
        //                 console.log(xhr.responseText);

        //             }
        //         });
        //     });
        // });
    </script>
    <script>

        function validateForm(event) {
            event.preventDefault();
            var form = document.getElementById('myForm');
            var formData = new FormData(form);

            // Reset error messages
            $('.text-danger').text('');


            var order_id = form.querySelector('#order_id').value;
            var transaction_id = form.querySelector('#transaction_id').value;
            var payment_gateway_id = form.querySelector('#payment_gateway_id').value;
            var payment_status = form.querySelector('#payment_status').value;
            var payment_mode = form.querySelector('#payment_mode').value;
            var invoice_number = form.querySelector('#invoice_number').value;
            var amount = form.querySelector('#amount').value;
            var datetime = form.querySelector('#datetime').value;
            // Reset error messages
            $('.text-danger').text('');

            var isValid = true;

            if (order_id === '') {
                $('#order_id-text-danger').text('Please select an Order.');
                isValid = false;
            }

            if (transaction_id === '') {
                $('#transaction_id').next('.text-danger').text('Please enter a Transaction Id.');
                isValid = false;
            }

            if (payment_gateway_id === '') {
                $('#payment_gateway_id-text-danger').text('Please select an Payment Gateway.');
                isValid = false;
            }

            if (payment_status === '') {
                $('#payment_status-text-danger').text('Please select an Payment Status.');
                isValid = false;
            }

            if (transaction_id === '') {
                $('#transaction_id').next('.text-danger').text('Please enter a Transaction Id.');
                isValid = false;
            }

            if (payment_mode === '') {
                $('#payment_mode').next('.text-danger').text('Please enter a Payment Mode.');
                isValid = false;
            }


            if (invoice_number === '') {
                $('#invoice_number').next('.text-danger').text('Please enter a Invoice Number.');
                isValid = false;
            }

            if (amount === '') {
                $('#amount').next('.text-danger').text('Please enter a amount.');
                isValid = false;
            } else if (isNaN(amount) || parseFloat(amount) <= 0 || parseFloat(amount) > 10000000) {
                $('#amount').next('.text-danger').text('Please enter a valid amount (between 1 and 100,000 Rs).');
                isValid = false;
            }
            if (datetime === '') {
                $('#datetime').next('.text-danger').text('Please select an datetime.');
                isValid = false;
            }
            
            if (!isValid) {
                return;
            }
            $.ajax({
                url: form.action,
                type: form.method,
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    toastr.success(response.message);
                    // Reload the page
                    location.reload();
                },
                error: function (xhr) {
                    var errors = xhr.responseJSON.errors;

                    // Display validation errors
                    $.each(errors, function (key, value) {
                        var errorElement = $('#' + key + '-text-danger');
                        if (errorElement.length > 0) {
                            errorElement.text(value[0]);
                        } else {
                            // Handle global errors or non-field-specific errors
                            // You can customize this part based on your needs
                            console.error('Validation error for field ' + key + ': ' + value[0]);
                        }
                    });
                }
            });
        }
        // function validateForm(event) {
        //     event.preventDefault();
        //     var form = document.getElementById('myForm');
        //     console.log(form);

        //     var order_id = form.querySelector('#order_id').value;
        //     var transaction_id = form.querySelector('#transaction_id').value;
        //     var payment_gateway_id = form.querySelector('#payment_gateway_id').value;
        //     var payment_status = form.querySelector('#payment_status').value;
        //     var payment_mode = form.querySelector('#payment_mode').value;
        //     var invoice_number = form.querySelector('#invoice_number').value;
        //     var amount = form.querySelector('#amount').value;
        //     // Reset error messages
        //     $('.text-danger').text('');

        //     var isValid = true;

        //     if (order_id === '') {
        //         $('#order-text-danger').text('Please select an Order.');
        //         isValid = false;
        //     }

        //     if (transaction_id === '') {
        //         $('#transaction_id').next('.text-danger').text('Please enter a Transaction Id.');
        //         isValid = false;
        //     }

        //     if (payment_gateway_id === '') {
        //         $('#gateway-text-danger').text('Please select an Payment Gateway.');
        //         isValid = false;
        //     }

        //     if (payment_status === '') {
        //         $('#status-text-danger').text('Please select an Payment Status.');
        //         isValid = false;
        //     }

        //     if (transaction_id === '') {
        //         $('#transaction_id').next('.text-danger').text('Please enter a Transaction Id.');
        //         isValid = false;
        //     }

        //     if (payment_mode === '') {
        //         $('#payment_mode').next('.text-danger').text('Please enter a Payment Mode.');
        //         isValid = false;
        //     }


        //     if (invoice_number === '') {
        //         $('#invoice_number').next('.text-danger').text('Please enter a Invoice Number.');
        //         isValid = false;
        //     }

        //     if (amount === '') {
        //         $('#amount').next('.text-danger').text('Please enter an amount.');
        //         isValid = false;
        //     } else if (isNaN(amount) || parseFloat(amount) <= 0 || parseFloat(amount) > 100000) {
        //         $('#amount').next('.text-danger').text('Please enter a valid amount (between 1 and 100,000 Rs).');
        //         isValid = false;
        //     }




        //     if (isValid) {
        //         form.submit();
        //     }
        // }

        $(document).ready(function () {
            $('#exportButton').click(function (e) {
                e.preventDefault(); // Prevent the default behavior of the link

                var createdAtValue = $('#created_at').val();

                if (createdAtValue.trim() === '') {
                    alert('Please select a date range before exporting.');
                    return false; // Stop further processing
                }

                // Replace encoded slashes with actual slashes
                var decodedCreatedAt = createdAtValue.replace(/%2F/g, '/');

                // If the created_at is not empty, proceed with exporting
                var currentParams = new URLSearchParams(window.location.search);
                var encodedPlan = encodeURIComponent($('#plan').val()); // Assuming you have a plan input
                var encodedCandidate = encodeURIComponent($('#candidate_id').val());
                var encodedStatus = encodeURIComponent($('#status').val());
                var encodedKeyword = encodeURIComponent($('#Keyword').val());

                // Update or add the new parameters
                currentParams.set("created_at", decodedCreatedAt);
                currentParams.set("plan", encodedPlan);
                currentParams.set("candidate_id", encodedCandidate);
                currentParams.set("status", encodedStatus);
                currentParams.set("Keyword", encodedKeyword);

                // Construct the export URL with updated parameters
                var exportUrl = "{{ route('admin.payment.export') }}?" + currentParams.toString();

                // Redirect to the export route
                window.location.href = exportUrl;
            });
        });
    </script>
@endsection