<div x-data="{ showPayment: @entangle('showPayment') }">
    <div class="d-flexs mb-4">
        <h2 class="h5 text-uppercase  float-left">{{__("Payments")}}</h2>
        <div class="float-right">
            <h2 class="h5 text-uppercase mb-0">
                <span class="text-success"> {{__("Balance")}} : <strong>{{format_amount(auth("customer")->user()->balance,true)}}</strong></span><br>
            </h2>
            <small class="text-muted">
                <i class="fa fa-info-circle"></i>
                {{__("Sum of remaining amount")}}
            </small>
        </div>


    </div>

    <div class="my-4 ">
        <div class="table-responsive">
            <table class="table table-content mt-4">
                <thead>
                    <tr>
                        <th>{{__('Method')}}</th>
                        <th>{{__('Payer Number')}}</th>
                        <th>{{__("Reference")}}</th>
                        <th class="right">{{__("Paid Amount")}}</th>
                        <th class="right">{{__("Remaining Amount")}}</th>
{{--                        <th>{{__("Paid At")}}</th>--}}
                        <th class="col-2"></th>
                    </tr>
                </thead>
                <tbody>
                @forelse($payments as $payment)
                    <tr wire:key="{{ $payment->id }}"
                        class="{{($payment->is_expired or !$payment->visible) ? "tables-danger" :  "tables-success"}}">
                        <td>{{ $payment->method->name }}</td>
                        <td>{{ $payment->payer_number }}</td>
                        <td>{{ $payment->provider_reference }}
                            @if($payment->is_expired)
                                <br> <small class="text-danger"><i> {{__("Expired")}}</i></small>
                            @endif
                        </td>
                        <td class="right">{{ format_amount($payment->paid_amount,true)}}</td>
                        <td class="right">{{ format_amount($payment->remaining_amount,true)}}</td>
{{--                        <td>{{ format_date($payment->paid_at)}}</td>--}}
                        <td class="text-right">
                            <button type="button" wire:click="displayPayment('{{ $payment->id }}')"
                                    x-on:click="showPayment = true" class="btn btn-link text-info">
                                <i class="fa fa-eye"></i>
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7">
                            <p class="text-center">{{__("No payments found.")}}</p>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($selectedPayment)

            <div x-show="showPayment" x-on:click.away="showPayment = false" class="border rounded shadow p-4">

                <div class="row ">
                    <div class="col-lg-4 col-xl-3s">
                        <div class="card" >
                            <img class="card-img-top" src="{{$selectedPayment->method->image}}" alt="{{$selectedPayment->method->name}}">
                            <div class="card-body">
                                <h5 class="card-title text-center"><strong>{{$selectedPayment->method->name}}</strong></h5>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-8 col-xl-9s">
                        <ul class="list-group">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>{{__("Référence")}}</strong>
                                <span>{{$selectedPayment->provider_reference}}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>{{__("Payer Number")}}</strong>
                                <span>{{$selectedPayment->payer_number}}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>{{__("Paid Amount")}}</strong>
                                <span>{{format_amount($selectedPayment->paid_amount,true)}}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>{{__("Remaining Amount")}}</strong>
                                <span>{{format_amount($selectedPayment->remaining_amount,true)}}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>{{__("Paid At")}}</strong>
                                <span>{{format_date($selectedPayment->paid_at)}}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>{{__("Created At")}}</strong>
                                <span>{{format_date($selectedPayment->created_at,__("d-m-Y à H:i:s"))}}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>{{__("Expired At")}}</strong>
                                <span>{{format_date($selectedPayment->expired_at)}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-12 mt-5">
                        <h2 class="h5 text-uppercase">{{__('Orders Usages (:count)',['count' => format_amount(count($selectedPayment->usages))])}}</h2>
                        <div class="table-responsive ">
                            <table class="table">
                                <thead class="bg-light">
                                <tr>
                                    <th class="border-0" scope="col"><strong class="text-small text-uppercase">{{__("Order Number")}}</strong></th>
                                    <th class="border-0" scope="col"><strong class="text-small text-uppercase">{{__("Order Statut")}}</strong></th>
                                    <th class="border-0 right" scope="col"><strong class="text-small text-uppercase">{{__("Amount Used")}}</strong></th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($selectedPayment->usages as $usage)
                                    <tr class="{{ ($usage->rejected) ? "table-danger" : "" }}">
                                        <td>{{ $usage->usageable->ref_id ?? $usage->usageable_id}}</td>
                                        <td>{!! $usage->usageable->status->badge_label ?? "/" !!}</td>
                                        <td class="right">{{ format_amount($usage->amount_used,true) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4">{{__("No usage in this payment.")}}</td>
                                    </tr>
                                @endforelse
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        @endif
    </div>
</div>
