@extends('admin.layout.master')
@section('content')
    <div class="content datatable">
        <div class="p-4 code-to-copy">
            <div class="card shadow-none border">
                <div class="card-header p-4 border-bottom bg-body">
                    <div class="row g-3 justify-content-between align-items-end">
                        <div class="col-md-12">
                            <h4 class="text-body mb-0" data-anchor="data-anchor" id="pagination-with-numbering">
                                Transaction List
                            </h4>
                            <form action="" method="POST" id="filter_array">
                                @csrf
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label" for="company_name">Company Name </label>
                                        <input class="form-control" name="company_name" id="company_name" type="text"
                                            value="" />

                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label" for="company_name">Company Email </label>
                                        <input class="form-control" name="company_email" id="company_email" type="text"
                                            value="" />

                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label" for="company_name">Transaction Date </label>

                                        <input class="form-control datetimepicker" id="datepicker" type="text"
                                            placeholder="dd/mm/yyyy" name="transaction_date" value=""
                                            data-options='{"disableMobile":true,"dateFormat":"Y-m-d","mode":"range"}' />

                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label" for="company_name">Status</label>
                                        <select name="status" id="status" class="form-control single-select">
                                            <option value="">Select Status</option>
                                            <option value="success">Success</option>
                                            <option value="failure">Failure</option>
                                        </select>

                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label" for="company_name">Payment Type</label>
                                        <select name="payment_type" id="payment_type" class="form-control single-select">
                                            <option value="">Select Type</option>
                                            <option value="maintenance">Maintenance</option>
                                            <option value="offer">Offer</option>
                                        </select>

                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-4">
                                        <button class="btn btn-primary p-2 " type="submit">
                                            <span class="fa fa-filter"></span> {{ 'Filter' }}
                                        </button>

                                        <button class="btn btn-danger p-2 filter_reset" type="button">
                                            <span class="fa fa-refresh"></span> {{ 'Reset' }}
                                        </button>

                                    </div>
                                </div>
                            </form>
                            <form action="{{ route('export-transaction') }}" method="GET" class="mt-2">
                                <div class="row">

                                    
                                    <div class="col-md-3">
                                        <label class="form-label" for="company_name">CSV Transaction Between</label>
                                        <input class="form-control datetimepicker" id="TRANdatepicker" type="text"
                                            placeholder="dd/mm/yyyy" name="csv_transaction" value=""
                                        data-options='{"disableMobile":true,"dateFormat":"Y-m-d","mode":"range"}' />
                                    
                                    </div>
                                    <div class="col-md-4 mt-4">
                                        <button class="btn btn-primary p-2 " type="submit">
                                            <span class="fa fa-download"></span> {{ 'Downalod' }}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                <div class="card-body p-0 overflow-auto">
                    <div class="p-4 code-to-copy">

                        <table class="table table-striped  fs-9 mb-0 AppendData">

                            @include('admin.transaction._listing')

                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
@section('script')
    <script>
        $(document).on('click', '.pagination a.page-link', function(event) {
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            fetch_data(page);
        });

        function fetch_data(page) {
            var data = $("#filter_array").serializeArray();
            data.push({
                name: "page",
                value: page
            });
            $.ajax({
                url: "{{ route('admin.transaction') }}",
                datatype: 'JSON',
                data: data,
                beforeSend: function() {

                    $('html, body').animate({
                        scrollTop: $(".AppendData").offset().top - 100
                    }, 600);

                    // $.scrollTo($('.AppendData'), 1000);
                    $('.AppendData').html(
                        '<img src="{{ asset('uploads/loader.gif') }}" class="product_loader" />'
                    );
                },
                success: function(data) {
                    $('.AppendData').html(data);
                }
            });
        }

        $("#filter_array").submit(function(e) {
            e.preventDefault();

            fetch_data(1);
        });

        $(".filter_reset").click(function() {
            $("#filter_array")[0].reset();
            // $("#country").val('').trigger('change');
            // $("#state").val('').trigger('change');
            // $("#city").val('').trigger('change');
            // $("#status").val('').trigger('change');
            fetch_data(1);
        });
    </script>
@endsection
@endsection