@extends('layouts.app')
@section('PageHeading', 'Payment History')
@section('bodyClass', 'user-management')
@section('content')
<div class="container_fluid">
    <div class="box_content">
        <div class="box_overlayout">
            <div class="box_innerlayout">
                <div class="task_card admin_total_card">
                    <div class="row align-items-center">
                        <div class="col-md-3 columns">
                            <div class="task_card_title">
                                <div class="task_card_header">
                                    <h5>Payment History</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 columns">
                            <div class="admin_total">
                                <div class="strategy_count columns">
                                    <div class="admin_count_header">
                                        <h5>{{ $transactions->total() }}</h5>
                                        <p>Total</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 columns logged-in-message">
                            @include('includes.message')
                        </div>
                    </div>
                </div>
                <div class="tab_content">
                    <div class="row align-items-center">
                        @csrf
                        <div class="col-md-10">
                            <form method="get" action="{{ route('user.index') }}">
                                <div class="search-bar-form">
                                    <input type="text" name="keyword" id="search-bar" type="text"
                                        placeholder="Search....." />
                                    @if (request()->get('role'))
                                    <input type="hidden" name="role" value="{{ request()->get('role') }}">
                                    @endif
                                    @if (request()->get('other'))
                                    <input type="hidden" name="other" value="{{ request()->get('other') }}">
                                    @endif
                                    <div class="task_btn float-end btn-left">
                                        <button class="create_btn">
                                            Search
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-2">
                            <div class="task_btn float-end mobile-btn">
                                @if (auth()->user()->role_id != 7)
                                <button class="create_btn" onclick="getModalPopup('{{ route('user.create') }}');">
                                    <img src="{{ asset('images/plus_white.svg') }}" alt="plus">
                                    Add User
                                </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion library_accordion" id="accordionExample">
                    <div class="accordion-item">
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample">
                            <div class="card_item_body">
                                <div class="card_item">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="card__header">
                                                <h5>Payment Date</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card__header">
                                                <h5>Invoice Number</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card__header">
                                                <h5>Amount</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card__header">
                                                <h5>Status</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @foreach ($transactions as $transaction)
                            <div class="card_item_body">
                                <div class="card_item">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="card__header">
                                                <h5>{{$transaction->payment_date}}</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card__header">
                                                <h5>{{$transaction->transaction_reference_id}}</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card__header">
                                                <h5>{{$transaction->amount}}</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card__header">
                                                <h5>{{$transaction->payment_status}}</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            <div class="text-center d-flex justify-content-end custom-pagination">
                                {{ $transactions->withQueryString()->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    @push('scripts')
    <script type="text/javascript">
    $(document).on("click", ".add-more-studio", function() {
        var $clone = $(".studio-items:first").clone();
        $clone.find('select').val('');
        $clone.find('.has-error').remove();
        $clone.appendTo(".more-studio");
        $(".studio-items").find('select').each(function(i, e) {
            this.name = this.name.replace('[0]', '[' + i + ']');
        });
        $(".stuio-remove-btn").not(':first').removeClass('d-none');
    });
    $(document).on("click", ".stuio-remove-btn", function() {
        $(this).parents('.studio-items').remove();
    });
    </script>
    @endpush