@extends('template.master')

@section('title', 'Transaction')

@push('styles')
<style>
    .dataTable {
        width: none !important;
    }
</style>
@endpush
@section('content')

<div class=" mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                    <h3 class="card-title">Transaction List</h3>
                    @if(isset($app_user_id) && !empty($app_user_id))
                        <a href="{{ route('app.user.index') }}" class="btn float-right" style="background: #f0ac63;color: #000000 !important;">Back</a>
                    @endif
                    </div>
                <!-- /.card-header -->
                <div class="card-body">
                    @if(session()->has('message'))
                    <div class="alert alert-success alert-dismissible">
                        {{ session()->get('message') }}
                    </div>
                    @endif
                    <div class="row my-2">
                    <input type="hidden" value="{{ $app_user_id }}" name="app_user_id" id="app_user_id">
                        <div class="form-group col-sm-12 col-md-3">
                            <label><strong>Name</strong></label>
                            <input type="text" name="name" id="name" class="form-control" placeholder="Search Name" value="{{ ($full_name != '' ? $full_name : '')}}" {{ ($full_name != '' ? 'disabled' : '') }}>
                        </div>
                        <div class="form-group col-sm-12 col-md-3">
                            <label><strong>Contact No </strong></label>
                            <input type="text" name="phone_no" id="phone_no" class="form-control" placeholder="Search Contact No">

                        </div>
                        <div class="form-group col-sm-12 col-md-3">
                            <label><strong>Authorize.net Id</strong></label>
                            <input type="text" name="authorize_net_id" id="authorize_net_id" class="form-control" placeholder="Search Authorize.net Id">
                        </div>
                        <div class="form-group col-sm-12 col-md-3">
                            <label><strong>Transaction Date</strong></label>
                            <input type="text" name="created_at" id="created_at" class="form-control" placeholder="Search Transaction Date">
                        </div>
                        <div class="form-group col-sm-12 col-md-3">
                            <label><strong>Type</strong></label>
                            <select name="type" id="type" class="form-control">
                                <option value="">Select Type</option>
                                <option value="1">Subscription</option>
                                <option value="2">Transaction</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-12 col-md-3">
                            <label><strong>Transaction Status</strong></label>
                            <select name="status" id="status" class="form-control">
                                <option value="">Select Transaction Status</option>
                                <option value="Success">Success</option>
                                <option value="Create">Create</option>
                                <option value="Cancel">Cancel</option>
                                <option value="Cancelled">System Cancelled</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-12 col-md-3">
                            <label><strong>Subscription Type</strong></label>
                            <select name="subscription_type" id="subscription_type" class="form-control">
                                <option value="">Select Subscription Type</option>
                                <option value="1">Monthly</option>
                                <option value="2">Yearly</option>
                            </select>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered dt-responsive display" id="example" style="width:none !important">
                        <thead>
                            <tr>
                                <th class="all">Name </th>
                                <th class="all">Job Title</th>
                                <th class="desktop">Contact No</th>
                                <th class="desktop">Type</th>
                                <th class="desktop">Authorize.net Id</th>
                                <th class="desktop">Date</th>
                                <th class="desktop">Subscription</th>
                                <th class="desktop">Subscription Type</th>
                                <th class="desktop">Message</th>
                                <th class="desktop">Status</th>
                                <th class="desktop">Response</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="authorize_net_response" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Authorize.net Response</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <textarea readonly class="w-100" rows="5"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('child-scripts')
<script>
    $(document).ready(function() {

        $("#name").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{ url('/user-name-list')}}",
                    method: "POST",
                    dataType: "json",
                    data: {
                        param: request.term
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            minLength: 3,
            response: function(event, ui) {
                if (!ui.content.length) {
                    var message = {
                        value: "",
                        label: "No results found"
                    };
                    ui.content.push(message);
                }
            }
        });

        $("#created_at").datepicker({
            dateFormat: "yy-mm-dd"
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        let table = $('#example').DataTable({
            columnDefs: [{
                "defaultContent": "-",
                "targets": "_all"
            }],
            processing: true,
            serverSide: true,
            searching: false,
            info: false,
            paging : true,
            lengthChange : true,
            autoWidth : true,
            responsive:true,
            order:[0, 'asc'],
            ajax: {
                url: "{{ route('transaction.ajax.list') }}",
                method: "POST",
                data: function(d) {
                    d.name = $('#name').val();
                    d.phone_no = $('#phone_no').val();
                    d.authorize_net_id = $('#authorize_net_id').val();
                    d.type = $('#type').val();
                    d.subscription_type = $('#subscription_type').val();
                    d.app_user_id = $('#app_user_id').val();
                    d.status = $('#status').val();
                    d.created_at = $('#created_at').val();
                }
            },
            columns: [{
                    data: 'full_name',
                    name: 'full_name',
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'phone_no',
                    name: 'phone_no'
                },
                {
                    data: 'type',
                    name: 'type'
                },
                {
                    data: 'authorize_net_id',
                    name: 'authorize_net_id'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'subscription_name',
                    name: 'subscription_name'
                },
                {
                    data: 'subscription_type',
                    name: 'subscription_type',
                },
                {
                    data: 'message',
                    name: 'message'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'authorize_net_response',
                    name: 'authorize_net_response'
                }
            ]

        });
        $('#phone_no, #authorize_net_id, #subscription_type, #status, #created_at, #type').change(function() {
            redrawTable(table);
        });
        $("#name").focusout(function(){
            redrawTable(table);
        });

        $('#authorize_net_response').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var response = button.data('response');
            var formattedResponse = JSON.stringify(response, null, 2); // Format JSON with indentation
            var modal = $(this);

            modal.find('.modal-body textarea').val(formattedResponse);
        });

    });

    function redrawTable(table) {
        table.draw();
    }
</script>
@endpush