<admin-page-header [title]="'Refund Request View'"></admin-page-header>


<div class="row">
    <div class="col-xl-8">
        <div class="card custom-card">
            <div class="card-body border-bottom bg-light-2">
                <div class="d-sm-flex align-items-center">
                    <div class="avatar avatar-md bg-light p-1 brround" style="line-height:0">
                        <img [src]="url + '/uploads/profile/' + (refundItem?.customer?.image || 'user-profile.png')" class="brround w-100 h-100" alt="img" />
                    </div>

                    <div class=" ms-2">
                        <h6 class="mb-1">{{refundItem?.customer?.username}}</h6>
                        <span class="badge bg-info-transparent me-2">{{'Customer' | translate
                            }}</span>
                        <span class="badge bg-danger-transparent">{{'Refund Comment' | translate
                            }}</span>
                    </div>

                    <div class="ms-auto">

                        <span class="badge text-muted"> {{refundItem?.refundCreatedDate | date: setting?.date_format + '
                            ' + setting?.time_format : timezone}}</span>
                    </div>
                </div>
                <div class="mt-2 ms-5 border-0">
                    {{refundItem?.refundReason}}
                </div>
            </div>
            <div id="commentSection">

                @for (comment of refundItem?.refund_comments; let i = $index; track comment.id) {
                @if(comment?.cust_id){
                <div class="card-body border-bottom">
                    <div class="d-sm-flex align-items-center">
                        <div class="avatar avatar-md bg-light p-1 brround" style="line-height: 0">
                            <img [src]="url + '/uploads/profile/' + (refundItem?.customer?.image || 'user-profile.png')" class="brround  w-100 h-100"
                                                            alt="img" />
                        </div>
                        <div class="ms-2">
                            <h6 class="mb-1">{{refundItem?.customer?.username}}</h6>
                            <span class="badge bg-info-transparent">{{"Customer" |
                                translate}}</span>
                        </div>

                        <div class="ms-auto">
                            <span class="badge text-muted">
                                {{comment?.created_at | date : setting?.date_format + ' ' + setting?.time_format :
                                timezone}}
                            </span>
                        </div>
                    </div>

                    <div class="ms-5">{{comment?.comment}}</div>
                </div>
                }@else{
                <div class="card-body border-bottom">
                    <div class="d-sm-flex align-items-center">
                        <div class="avatar avatar-md bg-light p-1 brround" style="line-height: 0">
                            <img [src]="url + '/uploads/profile/' + (comment?.user?.image || 'user-profile.png')" class="brround  w-100 h-100" alt="img" />
                        </div>
                        <div class="ms-2">
                            <h6 class="mb-1">{{comment?.user?.name}}</h6>
                            <span class="badge bg-primary-transparent">
                                {{comment?.user?.roles?.[0]?.name}}
                            </span>
                        </div>
                        <div class="ms-auto">
                            <span class="badge text-muted">
                                {{comment?.created_at | date : setting?.date_format + ' ' + setting?.time_format :
                                timezone}}
                            </span>
                        </div>
                    </div>
                    <div class="ms-5">{{comment?.comment}}</div>
                </div>
                }
                }

            </div>
        </div>

        @if(refundItem?.status != 'refundRejected' && refundItem?.status != 'refunded'){
        <div class="card custom-card mt-3">
            <div class="card-header">
                <div class="card-title">
                    <h6 class="mb-0">{{'Add a comment' | translate}}</h6>
                </div>
            </div>

            <div class="px-4 py-3">
                <div class="d-sm-flex align-items-top">
                    <div class="avatar avatar-md bg-light p-1 brround" style='line-height: 0'>
                        <img [src]="url + '/uploads/profile/' + (user?.image || 'user-profile.png')" class="brround  w-100 h-100" alt="img" />
                    </div>
                    <textarea class="form-control ms-3" id="refundComment" #refundComment
                        (change)="handleCommentChange($event)"></textarea>
                </div>

                <div class="d-flex mt-2">
                    <div class="ms-auto">
                        <button class="btn btn-primary" id="replyToCustomer" type="button" (click)="handleSubmit()">
                            {{'Reply' | translate}}</button>
                    </div>
                </div>
            </div>
        </div>
        }

    </div>

    <div class="col-xl-4">
        @if(refundItem && refundItem?.status !== 'refundRejected' && refundItem?.status !== 'refunded') {
        <div class="col-xl-12 mb-3 d-flex gap-3">
            <a href="javascript:;" id="approveRefund" (click)="approveRefund()" class="btn btn-outline-primary"><i class="me-2 bi bi-check-lg"></i>{{'Approve Refund' | translate}}</a>
            <a href="javascript:;" id="rejectRefund" (click)="rejectRefund()" class="btn btn-outline-danger"><i class="me-2 bi bi-x-octagon"></i>{{'Reject Refund' | translate}}</a>
        </div>
    }
        <div class="card custom-card">
            <div class="">
                <div class="card-header justify-content-between">
                    <div class="card-title">
                        {{'Purchased Details' | translate}}
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap">
                            <tbody>

                                <tr>
                                    <td class="w-25">
                                        <span class="d-block fw-semibold">{{'Product Name' |
                                            translate}}</span>
                                    </td>
                                    <td class="w-10">:</td>
                                    <td class="text-start  text-muted">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-fill">
                                                <p class="fw-semibold mb-0">
                                                    <a href="#!">
                                                        {{refundItem?.ticket_type == 'customInvoice'
                                                        ? ('Custom Invoice' | translate) : ""}}
                                                    </a>
                                                </p>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="w-25">
                                        <span class="d-block fw-semibold">{{'Customer Name' |
                                            translate}}</span>
                                    </td>
                                    <td class="w-10">:</td>
                                    <td class="text-start text-muted">
                                        {{refundItem?.customer?.username}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-25">
                                        <span class="d-block fw-semibold">{{'Request Date' |
                                            translate}}</span>
                                    </td>
                                    <td class="w-10">:</td>
                                    <td class="text-start text-muted">
                                        {{refundItem?.refundCreatedDate | date : setting?.date_format : timezone}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-25">
                                        <span class="d-block fw-semibold">{{'Gross Amount' |
                                            translate}}</span>
                                    </td>
                                    <td class="w-10">:</td>
                                    <td class="text-start text-muted">
                                        {{refundItem?.customerAmount}}
                                    </td>
                                </tr>

                                @if(refundItem?.status == 'refunded'){
                                @if(refundItem?.gatewayName){
                                <tr>
                                    <td class="w-25">
                                        <span class="d-block fw-semibold">{{refundItem?.gatewayName}}</span>
                                    </td>
                                    <td class="w-10">:</td>
                                    <td class="text-start text-muted">
                                        {{symbol && symbol + ' ' + refundItem?.gatewayFee}}
                                    </td>
                                </tr>
                                }
                                @if(refundItem?.countryTaxName != null && refundItem?.countryTaxAmount != null){
                                <tr>
                                    <td class="w-25">
                                        <span class="d-block fw-semibold">{{refundItem?.countryTaxName}}</span>
                                    </td>
                                    <td class="w-10">:</td>
                                    <td class="text-start text-muted">
                                        {{symbol && symbol + ' ' +
                                        refundItem?.countryTaxAmount}}
                                    </td>
                                </tr>
                                }
                                <tr>
                                    <td class="w-25">
                                        <span class="d-block fw-semibold">{{'Net Amount Refunded' | translate}}</span>
                                    </td>
                                    <td class="w-10">:</td>
                                    <td class="text-start text-muted">
                                        {{symbol && symbol + ' ' +
                                        refundItem?.netAmountRefunded}}
                                    </td>
                                </tr>
                                }

                                <tr>
                                    <td class="w-25 border-0">
                                        <span class="d-block fw-semibold">{{'Status' |
                                            translate}}</span>
                                    </td>

                                    <td class="w-10 border-0">:</td>
                                    <td class="text-start  border-0">
                                        @if(refundItem?.status === 'refunded'){
                                        <span class="badge bg-success">{{ 'Refunded' }}</span>
                                        }
                                        @if(refundItem?.status === 'refundpending'){
                                        <span class="badge bg-warning">{{ 'Waiting For Approval' }}</span>
                                        }
                                        @if(refundItem?.status === 'refundRejected'){
                                        <span class="badge bg-danger">{{ 'Refund Rejected' }}</span>
                                        }
                                        @if(!refundItem?.status || ['refunded', 'refundpending',
                                        'refundRejected'].indexOf(refundItem?.status) === -1){
                                        <span class="badge bg-success">{{ 'Pending' }}</span>
                                        }
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>