@extends('layouts.parent.app')
@section('content')
<!-- header end -->
<link  href="{{url('css/jquery.dataTables.min.css')}}" rel="stylesheet">
{{-- <div class="center-container"> --}}
    <div class="club-listing-main full-width">
        <div class="container">
            @include('parent.page_header')
            <div class="full-width">    
                <div class="register-invoice-left">
                    <div class="cart-header-title">
                        <h4 class="text-uppercase mb-0">Transaksjoner</h4>
                    </div>
                    <div class="club-listing-box-main full-width all-transaction" >
                        <table id="transaction">
                            <tbody></tbody>
                        </table>
                        {{-- <div class="single-transaction">
                            <div class="transaction-date d-flex align-items-center justify-content-between">
                                <h6 class="mb-0">Transaksjon 0020366014</h6>
                                <span>17.01.2022</span>
                            </div>
                            <p class="title">IL Nordild</p>
                            <div class="single-activity-payment">
                                <p>Fritidskortet</p>
                                <p>kr. 500,00</p>
                            </div>
                            <div class="single-activity-payment">
                                <p>Egenandel</p>
                                <p>kr. 400,00</p>
                            </div>
                            <div class="total-amount">kybr. 900,00</div>
                        </div> --}}
                    </div>
                </div>
                <div class="register-invoice-right confirm-payment-right">
                    @include('parent.transaction_right_data')
                </div>
            </div>
        </div>
    </div>

<div class="modal fade transaction-detail center-popup sm-popup" id="transactionPopup" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ trans('parent.transaction_details') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="{{ url('js/datatables.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {

        $('#transaction').DataTable({
        language: { search: '', searchPlaceholder: "Søk",emptyTable: "Ingen data tilgjengelig i tabellen",zeroRecords: "Fant ingen samsvarende poster",
            "processing":"<p class='dt-loading'>Laster inn..</p>"},
        processing: true,
        serverSide: true,
        searching: false,
        ajax: "{{route('parent.transaction_datatable', $child_data->id)}}",
        type: "POST",
        order: [],
        "columnDefs": [
            {"orderable": false, "targets": 0},
            {"searchable": false, "targets": 0},
            {"sortable": false, "targets": 0},
        ],
        columns: [
            {data: 'data', name: 'data', },
        ],
        "drawCallback": function() {
			// $(this.api().table().header()).hide();
		},
    });
    
    $('#transaction').on('click','.view_details',function(){
        var url = $(this).attr('data-href');
        $.ajax({
                type: "get",
                url: url,
                cache: false,
                dataType: "json",
                success: function (data)
                {
                    $('#transactionPopup .modal-body').html(data.html);
                    $('#transactionPopup').modal('show');
                },
            });
    });
});
</script>
@endsection