@extends('widgets.document.layout.mainlayout')

@section('page_css')
<style>
    #payment-details {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 400px;
        margin: 0 auto;
    }
</style>
@endsection

@section('content')
<div class="account-content">
    <div class="d-flex flex-wrap w-100 vh-100 overflow-hidden account-bg-01">
        <div class="d-flex align-items-center justify-content-center flex-wrap vh-100 overflow-auto p-4 w-50 bg-gray">
            <div id="payment-details" class="text-center mb-3">
                <span class="avatar avatar-xl rounded-circle text-white bg-{{ $payment->status == 2 ? 'success':'danger' }} mb-4"><i class="ti ti-{{ $payment->status == 2 ? 'check':'x' }} fs-26"></i></span>
                <h4 class="mb-2 fs-20 text-{{ $payment->status == 2 ? 'success':'danger' }}">Payment {{ $payment->status == 2 ? 'Successful':'Failed' }}!</h4>
                <p class="mb-3">{{ $payment->status == 2 ? 'Your payment was successfully.':'Payment failed, please try again later.' }}</p>
                <div class="mb-3 pt-3 pb-3">
                    <h6 class="mb-3 fw-bold text-primary">Payment Information</h6>
                    <ul class="">
                        <li class="row mb-3">
                            <span class="col-6 fw-semibold text-black text-start">Deal Name</span><span class="col-6 text-end">{{ $deal->name }}</span>
                        </li>
                        <li class="row mb-3">
                            <span class="col-6 fw-semibold text-black text-start">Deal Amount</span><span class="col-6 text-end">{{ $deal->amount }} AUD</span>
                        </li>
                        @if($payment->status == 2)
                        <li class="row mb-3">
                            <span class="col-6 fw-semibold text-black text-start">Paid At</span><span class="col-6 text-end">{{ $payment->paid_at->format('d F Y, h:i A') }}</span>
                        </li>
                        <li class="row mb-3">
                            <span class="col-6 fw-semibold text-black text-start">Paid Method</span><span class="col-6 text-end">eWay</span>
                        </li>
                        @endif
                        <li class="row mb-3">
                            <span class="col-6 fw-semibold text-black text-start">Transaction No.</span><span class="col-6 text-end">{{ $payment->transaction_id }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center justify-content-center flex-wrap vh-100 overflow-auto p-4 w-50 bg-backdrop">
            <div class="mx-auto w-100 p-4">
                <div class="text-left mb-3">
                    <img src="/assets/images/logo-2.png" alt="Logo" width="200" class="img-fluid">
                </div>
                <div class="mb-4">
                    <h4 class="mb-2 fs-20">{{ ucfirst($document->type) }} Information</h4>
                    <p>{{ $document->description }}</p>
                </div>
                <div class="mb-3 border-bottom pb-3">
                    <h6 class="mb-3 fw-bold">Deal Information</h6>
                    <ul>
                        <li class="row mb-3">
                            <span class="col-3 text-black fw-semibold">Deal Name</span><span class="col-3">{{ $deal->name }}</span>
                            <span class="col-3 text-black fw-semibold">Deal Amount</span><span class="col-3">{{ $deal->amount }}</span>
                        </li>
                        <li class="row mb-3">
                            <span class="col-3 text-black fw-semibold">Email</span><span class="col-3">{{ $contact->email }}</span>
                            <span class="col-3 text-black fw-semibold">Phone</span><span class="col-3">{{ $contact->phone }}</span>
                        </li>
                        <li class="row mb-3">
                            <span class="col-3 text-black fw-semibold">Address</span><span class="col-3">{{ $contact->address }}</span>
                            <span class="col-3 text-black fw-semibold">Created At</span><span class="col-3">{{ $document->created_at->format('d F Y, h:i A') }}</span>
                        </li>
                        <li class="row mb-3">
                            <span class="col-3 text-black fw-semibold">Sent At</span><span class="col-3">{{ $document->sent_at->format('d F Y, h:i A') }}</span>
                            <span class="col-3 text-black fw-semibold">Signed At</span><span class="col-3">{{ $signer->signed_at->format('d F Y, h:i A') }}</span>
                        </li>
                        <li class="row mb-3">
                            <span class="col-3 text-black fw-semibold">Signed At</span><span class="col-3">{{ $signer->signed_at->format('d F Y, h:i A') }}</span>
                            <span class="col-3 text-black fw-semibold">Completed At</span><span class="col-3">{{ $document->sent_at->format('d F Y, h:i A') }}</span>
                        </li>
                    </ul>  
                </div>
                 @if($payment->status == 2)
                <div class="mb-3 border-bottom pb-3">
                    <div class="row">
                        <div class="col-6 offset-3">                           
                            <a href="{{ route('tenant.widgets.document.generate.receipt.pdf', $document->id) }}" class="btn btn-success w-100" id="btnDownload">Download Receipt</a>
                        </div>
                    </div>
                </div>
                @endif
                <div class="text-center">
                    <p class="fw-medium text-gray">Copyright &copy; {{ date('Y') }} - {{ env('APP_NAME') }} </p>
                </div>
            </div>
        </div>        
    </div>
</div>
@endsection

@section('page_js')
<script>
    
</script>
@endsection